Clearing floats into rows - Test page

When you have a lot of floats and want 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.

Win IE 6, Win IE 5.x, Opera 7.23: 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 rest of the space.

Can anyone tell for sure which of these browsers obey the CSS specs?

A static version:

1-1
1-2
1-3
1-4
1-5
2-1
2-2
2-3
2-4
2-5
3-1
3-2
3-3
3-4
3-5
4-1
4-2
4-3
4-4
4-5
5-1
5-2
5-3
5-4
5-5

A dynamic version: (will need javascript enabled to see the browser positions the floats)

 

Solutions

You can insert all N cells that would make up a row into a smaller row-container.

1-1
1-2
1-3
1-4
1-5
2-1
2-2
2-3
2-4
2-5
3-1
3-2
3-3
3-4
3-5
4-1
4-2
4-3
4-4
4-5
5-1
5-2
5-3
5-4
5-5

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

1-1
1-2
1-3
1-4
1-5
2-1
2-2
2-3
2-4
2-5
3-1
3-2
3-3
3-4
3-5
4-1
4-2
4-3
4-4
4-5
5-1
5-2
5-3
5-4
5-5