Floating Boxes, float rule 5, and IE

These are two versions of the same structure. The first is an ordered list, the second is composed of divs. The li's and child divs are float:left and width:47%. Boxes with red borders are class="rowstart" and are clear:left. Boxes with grey borders should float next to the previous li.rowstart but not float up any higher, if I read the spec correctly.

The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document. CSS 2.1 Visual formatting model, rule 5

This should result in 2 columns of boxes.

in Firefox and Safari, this is the case. In IE6/7, grey boxes simply fill the remaining space, floating up past their preceding cleared li. I'd love to know how to workaround this problem better than I have.

UPDATE 2007-07-23: It appears that Bruno Fassino has a thumbnail page that may demonstrate a way to solve this problem, though I've not yet had time to inspect it carefully enough that I'd feel comfortable implementing it.

Ordered List

1. 1

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec lorem ac mi pharetra hendrerit. Maecenas id nunc at magna lacinia laoreet. Duis sollicitudin. Nam elementum tortor a arcu. Maecenas eu lacus. Nam aliquet viverra nisl. Pellentesque nec dui. Curabitur ornare justo ut metus. Donec sed lectus ac orci dapibus bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pulvinar lectus ut lorem. Duis risus. Aliquam dictum.

2. 2

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec lorem ac mi pharetra hendrerit. Maecenas id nunc at magna lacinia laoreet. Duis sollicitudin. Nam elementum tortor a arcu. Maecenas eu lacus. Nam aliquet viverra nisl. Pellentesque nec dui..

3. 3

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec lorem ac mi pharetra hendrerit. Maecenas id nunc at magna lacinia laoreet. Duis sollicitudin. Nam elementum tortor a arcu. Maecenas eu lacus. Nam aliquet viverra nisl. Pellentesque nec dui. Curabitur ornare justo ut metus. Donec sed lectus ac orci dapibus bibendum. Lorem ipsum dolor sit amet,

4. 4

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec lorem ac mi pharetra hendrerit. Maecenas id nunc at magna lacinia laoreet. Duis sollicitudin. Nam elementum tortor a arcu. Maecenas eu lacus. Nam aliquet viverra nisl. Pellentesque nec dui. Curabitur ornare justo ut metus. Donec sed lectus ac orci dapibus bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pulvinar lectus ut lorem. Duis risus. Aliquam dictum.

5. 5

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec lorem ac mi pharetra hendrerit. Maecenas id nunc at magna lacinia laoreet. Duis sollicitudin.

6. 6

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec lorem ac mi pharetra hendrerit. Maecenas id nunc at magna lacinia laoreet. Duis sollicitudin. Nam elementum tortor a arcu. Maecenas eu lacus. Nam aliquet viverra nisl. Pellentesque nec dui. Curabitur ornare justo ut metus. Donec sed lectus ac orci dapibus bibendum. Lorem

Simple list of DIVs

Workaround

Right now the only workaround I've come up with (which requires more logic in the presentation code to accomplish) is to wrap each pair (row) of child divs in another div (just about recreating a table in the process). I'd love to find a non-markup workaround.

DIVs with extra DIV wrapping each pair (row)