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?

Solution 1

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

Solution 2

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.

Solution 3

I have similar problems, and the solutions provided by Matt Bradley did not work for me (but thanks for posting it anyway!). I wanted to have margin-top:10px on a h1 element.

The solution I came up with was by adding position:relative , top:10px and margin-top:0px to the h1 element.

Solution 4

Try closing your clear div.

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

Solution 5

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)

View more solutions

Comments

[Justin]

That's an issue, but not the issue. Adding the clear class to the box div will still clear anything prior.

[Richard Knop]

I just forgot to close it here, it's closed in the source code. I edited my post.

[Richard Knop]

I cannot use padding-top: 10px; because the boxes already have background color and they already have padding: 10px so the content inside them looks better.

[Justin]

Try adding a filler like   to the clear div. I remember there was a bug in some earlier version that needed content like that.

[Richard Knop]

Adding   solved the problem :) I just had to also add height: 0; to the .clear class.

[Richard Knop]

Yes but I prefer to have minimal markup and use only so many divs that are absolutely necessary. This would just add another element with no semantic meaning that is not even necessary for styling.

[dalizard]

@Richard, I would say that <div class="clear">&nbsp;</div> is exactly the same. And personally I would choose the overflow solution, since the HTML looks better. But that's me.

[Carrie Kendall]

@Justin you should post this as an answer. This is the true solution plus the height:0; overflow:hidden;. +1