IE7 Clear Float Issue

Question

Hi this is a simplified version of an issue I\'m having with IE7. Basically the divs following the cleared div (green) don\'t behave as expected (in IE7). It works as expected i

Answer 1

You can...

A) insert a "divider" clear element between 3rd and 4th which will do clear:both, span a height of 1px, take up the entire width, and then margin-top:-1px on 4, 5, 6 so there's no vertical 1px gap in between.

B) use inline-block instead of floats, like this: http://jsfiddle.net/gLcNm/16/

This requires markup change so there are no whitespace between your box divs, AND a css hack for IE which doesnt natively do inline-block without redeclaring inline for block levels.

C) make each of those box divs be contained by a "row" div:

<div class="row">
<box><box><box>
</div>

Then make row clear so it'll contain the boxes.