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

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.