Safari/WebKit table over-run when using whitespace: nowrap

Question

Having a strange rendering issue with Safari:

I have a table inside a div. Inside the table <td> I have lots of div's floated left. So the normal display is all of the divs within the td stacked up to the left until they fill the width, then flow to the next line, and so forth. So something like this:

|===========================|
|  |---------------------|  |
|  | XXX  XXX  XXX  XXX  |  |
|  | XXX  XXX            |  |
|  |                     |  |
|  |----------------------  |
|===========================|

That works in all browsers except safari/webkit, where it ends up something like this:

|===========================|
|  |-------------------------------|
|  | XXX  XXX  XXX  XXX  XXX  XXX  |
|  |                               |
|  |-------------------------------|
|===========================|

Update: Finally figured out the issue: my inner divs (the "XXX"s) had white-space: nowrap. Apparently webkit was no-wrap'ing the entire list of divs instead of applying the nowrap within the div.

That was a nasty one.

(This had nothing to do with display:none)

Answer 1

Answering my own question:

Finally figured out the issue: my inner divs (the "XXX"s) had white-space: nowrap. Apparently webkit was no-wrap'ing the entire list of divs instead of applying the nowrap within the div.

That was a nasty one.

(This had nothing to do with display:none)

Answer 2

Hi Parand, how did you solve the problem of the nowrap DIVs stuck on the same line? Did you have to remove the nowrap entirely?

Answer 3

Actually, I asked my above question separately, then I found the solution like a big boy:

Instead of using white-space:nowrap, in this case it's more appropriate to go with display:inline-block.

The CSS needs to be adapted here and there for the change, but it works as expected.

http://stackoverflow.com/questions/2392344/elements-with-nowrap-get-stuck-to-adjacent-elements-in-webkit/2392360#2392360