Floats not clearing properly in IE - how to fix?
- by Stomped
I've been banging my head for about an hour now, and I've distilled the problem down to the simplest example I can think of that shows the problem.
The CSS/HTML
<style>
#T div { float: left; }
._b { clear: left; }
</style>
<div id='T'>
<div class='_a'>*</div>
<div class='_b'>*</div>
<div class='_c'>*</div>
<div class='_d'>*</div>
</div>
IE7
***
*
FF, Chrome, Opera
*
***
The result in FF/Chrome/Opera is what I'd expect. There's no adding more mark-up to fix this and I'm absolutely befuddled on to how to make it work properly in IE.
It gets really ugly when you have say, 3 all on a row to themselves and then 3 meant to be on the same line -- the extra 2 end up on the first row.
I really hope someone knows the work-around for this.
