Bizzare behavior with CSS margins.

Question

This page I have is super simple, this should be a breeze but I'm stumped.

I have two DIVs, one inside the other. In the first DIV, I have the margins set so that it lays at the top of the page, centered. The second DIV should lay inside the first, centered, but with a 50px margin at top. However, the 50px margin is being applied to the parent DIV and not the child. If I add a border to the parent DIV, it behaves like I expect it to, but not without.

Can anyone offer me any insight to this? Thanks in advance.

<div id="pageWrapper">
    <div id="mainWrapper">
    <p>foo</p>
     </div>
</div>

*{
    margin:0px;
    padding:0px;    
}
body{
    background-color:#034375;
}
#pageWrapper{
    width:960px;
    margin:0px auto 0px auto;
    background:url('i/blue-gradient.jpg') top left no-repeat;
}
#mainWrapper{
    width:500px;
    margin:50px auto 0 auto;    
    border:1px solid #000000;
    background-color:#eeeeee;
}

Answer 1

You probably want to set the padding of mainWrapper instead of margin.

padding:50px 0 0 0;

Check out this description of the box model to see how margins and padding differ.

Answer 2

You don't say which browser you're seeing this in. For me it works as expected in Firefox. However, I suspect you're seeing the issue in Internet Explorer. This is probably because the inner div doesn't have hasLayout applied - this is usually the cause of IE styling bugs. Try adding zoom:1 to the mainWrapper CSS declaration and see if that works.

Answer 3

This issue has to do with the CSS spec on rendering adjacent margins. Essentially, because there's nothing "in between" the margins of the containing div and the margins on the inner div, the larger value is used for both.

You'll see this mainly in Firefox, and although the behavior seems to follow the letter of the law, I'm not sure this particular case behaves as intended by the spec writers.

Fortunately, it's easy to fix -- put something "between" the margins. You've already noticed that putting a border on the parent div works. You can make this border transparent, and reduce the inner margin by 1px, and it will appear functionally the same as your above case. Another option is to apply one pixel of padding-top to the parent div. A third option is to use padding-top: 50px on the parent div instead of applying a top margin to the child div.

More information on collapsing margins.