IE8 - Container with margin-top: 10px has no margi

Question

EDIT: This happens only in IE8, it works fine in IE7, Firefox, Opera etc

First of all, here is a picture I have made in photoshop to demonstrate my problem: http://richardknop.com/pict.jpg

Now you should have idea about my issue. Here is a simplified version of markup I'm using (I left out most irrelevant content):

<div class="left">
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
</div>
<div class="right">
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
</div>
<div class="clear"></div>
<div class="box">
    //
    // NOW THIS BOX HAS NO TOP MARGIN
    //
</div>
<div class="box">
    // box content
</div>

And CSS styles go like this:

.clear {
    clear: both;
}
.left {
    float: left;
}
.right {
    float: right;
}
.box {
    overflow: auto;
    margin-top: 10px;
}

Obviously I have left out all irreevant styles like borders, background colors and images, font sizes etc. I have kept only important stuff.

Any idea where could be the problem?

Answer 1

I don't have IE8 with me... but did you try adding clear: both to the bottom div and adding a bottom margin to one of the top floats? I'm pretty sure that would achieve the same effect without any extra divs.