I've come across a weird bug that I've not seen before. It affects IE6 and IE7 (IE8 seems to have fixed it). Basically it involves floated elements that come after a cleared floated element not respecting the clear.
I've made an example page to demonstrate it. It's best to look at it in a decent browser first to see what it should be like and then in IE6 or IE7.
The blue div clears the red and green div, and the yellow div should follow on from the blue div on the second row. But in IE6 and IE7 it ignores the fact that he blue div has been cleared and floats up and bumps up against the red div, under the green div. This only happens if the green div is shorter than the red div.
The CSS is in the html so it is easy to see. I've tried the usual stuff of using zoom:1 to trigger hasLayout, tried overflow: hidden that usually tames floats.
The only workarounds I can think of at the moment is to either put something like a <br /> after the green div to clear the floats or to put each 'row' of divs into their own containing div. Both of these don't seem like particularly elegant solutions though.
Hopefully there is a solution - but I'm not holding my breath.
