The issue

When you have a lot of floats and wish to break them in rows without any extra markup, you can do the following. Let's say you want to have only N columns and the width of the container is larger than the width of N columns. For every float which is the (multiple-of-N)th you will style it with: clear: left. You will think that it will be perfect. But as we've seen in the world of browsers' bugs, it ain't.

The browsers are split up in 2 parts:

Firefox 1.0.4, Opera 8, Netscape 7.02

the ones which display what you expect

Win IE 6, Win IE 5.x, Opera 7.23

and the ones which don't, and display as intended only the first row of cells and the cells to which you apply clear: left, the other cells just try to fill up the previous rows as long as parent's box width allows.

Check the test page.

Can anyone tell for sure which of these browsers obey the CSS specs? I have read the floats section of the CSS 2.1 specifications, and I tend to believe that Firefox and all the Mozilla-based browsers plus Opera are handling this issue correctly, whereas IE misinterprets the specs. You can tell that this is the right way to behave from Opera's behavior. Up until 7.23 Opera gives the same error as IE, but in the 8 version (which is a very recent build) we can see it render as Firefox, which shows us that the Opera developers have came on the right path.

Solutions

Fortunately, there are workarounds to this issue.

For example, you can insert all N cells that would make up a row into a smaller row-container.

Or, you can set the width of the container to somewhere around N * (width_of_cell + margin_of_cell)

So in conclusion, IE is again showing us what it wants in its own wrong way as always.

Comments