IE8 bug with floating divs

Visualizing an IE8 bug. IE8 likes to remove the top margin so putting both floating elements in a block that is cleared helps resolves that. Originally from inventpartners http://www.inventpartners.com/ie8_margin_top_bug

by Augustus Yuan

HTML

<div class="container">
    <div class="ie8fix">
       <div class="left">
           Left Floated &lt;div&gt;
       </div>
       <div class="right">
           Right Floated &lt;div&gt;
       </div>
       <div class="clear"></div>
    </div>
    <div class="blockWithMargin">
        &lt;div&gt; with margin: 10px 0 0 0;
    </div>
</div>

CSS

div.container {
    width: 400px;
}

div.ie8fix {
    clear: both;
}

div.clear {
    clear:both;
}

div.left {
    float: left; 
    background: #CCCCFF; 
    width: 150px; 
    height: 100px; 
    display: block;
}

div.right {
    float: right; 
    background: #CCFFCC; 
    width: 150px; 
    height: 100px; 
    display: block;
}

div.blockWithMargin {
    background: #00FFFF; 
    margin: 10px 0 0 0; 
    height: 200px; 
    width: 400px;
}