Question

This problem is happening for me on IE8 and Chrome which makes me think this is a standards thing.

I am creating a site with header and menu using DIVs that do not have any content but do have background images and heights / widths set in CSS. I want the inner DIV to have margin against the parent div but it applies the margin to the parent div. Putting content within the divs corrects this. IE7 does not have this problem. I do not want to use   because it does throw things out and it seems like a hack.

Please see example code to recreate below:

<style>

#header{
    width:600px;
    height:300px;
    background-color:red;
}

#headerMenu{
    height:100px;
    width:500px;
    margin-left:auto;
    margin-right:auto;
    background-color:blue;
    margin-top:20px;
}

</style>

<div id="header">
    <div id="headerMenu">
    </div>
</div>

If you give the parent div content or even a border the layout works correctly. I’ve hit this same problem a few times on this site. I wanted to give a margin-top to a list of menu items but as the headerMenu div (its parent) also does not have any content it bubbles up the property.

What’s going on?

Answer 1

I think you’re running in to margin collapsing.

See the CSS 2.1 spec on margin collapsing for more info.