[RESOLVED] CSS Layout Issues

I am having problems with layout using CSS. I have an unknown number of divs, each with a background-image and an anchor element inside them. What I want is for the divs to be laid out left to right. So I used

Code:

---

.container
{
  display : inline;
}

---

This does exactly what I want, lays them out left to right and wraps them to the next line if it fills up the page. However, if an anchor is too long, it is wrapping halfway through the anchor. To fix this I use :

Code:

---

a
{
  white-space : nowrap;
}

---

I have used that property in the past with success. However, now it appears to be cancelling the nice wrapping effect completely. My inline divs now flow off the page and require the user to scroll to the right to see them all. Do white-space : nowrap and display : inline not play nice together?

I'm sure this is a browser-rendering issue, but I'm surprised that I'm having this problem in both IE7 and Firefox. Does anyone else have any suggestions on another way I can do this?

The styles inline and nowrap are perfectly fine together. It would help us to see the big picture. Perhaps you could show us a whole page of the code. Please remember to use [code] tags.

[code]
Your code goes here.
[/code]

Also, inline displayed div tags are not very common. You might want to work with float instead.

Well, regardless of whether or not this is a real issue with using those two properties together, I have found a solution. For posterity's sake, here's what I did :

First, when building the anchor, I replaced ' ' with ' '

Code:

---

anchor.innerHTML = cfg['text'].replace(/ /g, " ");

---

I then removed the white-space attribute from my CSS. This was closer to a fix, but it still wasn't wrapping. On a flyer, I tried to put a space between the divs hoping that it would see the space and decide it was time to wrap.

Code:

---

//after building the div and appending it :
div.appendChild(document.createTextNode(' '));

---

That did the trick. And it works in both IE and FF. Now that this is finished, I can finish working on the "hard stuff".

Cheers!

Well Peej, apparently you are wrong as it wasn't working. I think the major difference here is that inline and nowrap weren't applied to the same element. Rather the nowrap was being applied to a child of the inline'd divs. Even more importantly, there weren't any elements between the inner nowrap'd elements, and the browsers didn't appear to be smart enough to realize they should break to a new line. In any case, I have found a simple solution.

Cheers!

Quote:

---

Originally Posted by gitter1226

Well Peej, apparently you are wrong as it wasn't working.

---

I simply stated that inline and nowrap work together. That statement is completely correct. It all depends on how you piece them together. Hence why I asked to see the complete code.

Either way...problem is solved. Good luck with the rest. :wave: