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

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

See if padding-top: 10px works. It might be that the margin is trying to go from the top of the page.

Answer 2

Try closing your clear div.

<div class="clear"></div>

Answer 3

I don't quite get this approach. You could wrap the <div>s with class right and left in another <div> and apply overflow: hidden, width: 100% to it so that the elements below floated elements will get displayed correctly.

Answer 4

enter code hereTry using a container with a width with overflow:hidden around the floated divs, and remove the cleared div.

    <div id="container">
        <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 right    </div>    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>
        </div>
    </div>
    <div class="box">    //    // NOW THIS BOX HAS NO TOP MARGIN    //</div>
<div class="box">    // box content</div>

And the CSS

#container { width: 100%; overflow: hidden; }

(sorry, I left IE7 on my work machine for testing so I can't verify)

Answer 5

I think this is an IE8 bug. Relates to a sibling element of a floated left and right div. With or without a clearing div, the final unfloated element loses its top margin in IE8.

We've tested this, and only IE8 gets it wrong:

http://www.inventpartners.com/content/ie8_margin_top_bug

We also came up with 3 solutions.

Answer 6

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.