Floats not clearing properly in IE - how to fix?

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.

Setting a width of the floated div's doesn't help nor does having a width on the parent element, because this is a simple example. Imagine each row can have 1-5 elements and then you can see the problem.

ansaurus

tags:

views:

answers: