IE Float/Clearing bug

The usual fixes didn't work.

[mep00]

I was trying to layout a form when I hit a bizarre bug. After doing some testing, I found the bug to be more generic. I've tried adding "display: inline;" and giving it a height, two common fixes, but to no avail. Boiling it down to a simpler form:

css:

div {float:left;}
.a {clear: left;}

html:

<div class="a">a1</div><div>b1</div>
<div class="a">a2</div><div>b2</div>
<div class="a">a3</div><div>b3</div>

What the above should display, and does in any normal browser:

a1b1
a2b2
a3b3

What IE6 displays:

a1b1b2b3
a2
a3

While I found a kludge which gets around the problem, namely, expanding the "b" boxes with either width or margin so that two can't fit on one line, the "solution" causes problems elsewhere, which in turn need their own patch. I have one place where, instead of two boxes, I need four. There I need to resort to negative margins to counter the extra positive margin. The net result seems like a house of cards just waiting to collapse. The only other option I could think of would entail extra markup (surprisingly, not unsemantic, just overly verbose). I would like to find a better solution (besides allowing IE6 to quietly die it's long overdue death). Any ideas?

Also, can someone please test this in IE7?

Thanks

[Setek]

I couldn't find a fix that didn't entail wrapping each "row" in a container - and you mentioned you didn't like the extra verbosity.

I did test in IE 6 and IE 7 for you though - in quirks and out, both displayed the exact same way, which is to say wrongly :/

[mep00]

I did test in IE 6 and IE 7 for you though - in quirks and out, both displayed the exact same way, which is to say wrongly

:(
Thanks Setek. I was cautiously optimistic about IE7, but it seems my caution was well founded. While the holes in IE's support of CSS is annoying, that doesn't hold a candle to IE's bugs, which are downright maddening!!!