Top Margin does not act like I expect.. why?

Question

So ive been doing html for a little while now.. but I keep running into issues when I use margins. This causes me to usually just use padding.

Anyway, let me give you an example of something I am working on currently.

http://vasoshield.xcsit.com/index.html

Main structure :

<div id="main">
   <div id="header">
       <div id="mainNav">
            main navigation...
       </div>
   </div>
   <div id="content">
        page content...
   </div>
</div>



#main { 
    margin: 0 auto;
    width: 745px;
    padding-left: 175px;
    padding-right: 50px;
    background: url(../images/white_bg.jpg) no-repeat top left;
    position: relative;
}

#header {   
    height: 210px; 
}
#mainNav { margin-top: 175px;  }

The problem is.. I put margin-top: 150px on the "mainNav" div.. and instead of pushing down 150px from "header" div.. the whole page gets moved down. So the "main" div actualy gets pushed down 150px.. I dont understand why!! If I use padding-top: 150px for "mainNav" div, it actually uses the "header" div to push down from.

Does my question make sense?

I am sure there is some sort of rule I just dont know about. Thanks ahead of time!!

Answer 1

try to put your main div position in position:absolute; It will work I think. I do not know the reason

Answer 2

Since there is no content in the header div before the mainNav div, the margin is the first thing that the browser needs to take into account, so it looks as if the whole page gets shifted down. I suggest to add 1px solid red borders to all divs so you can see which one goes where.

Answer 3

You're dealing with collapsing margins.

See: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

In short, the top margin of #main and #header are next to (adjoining) the margin of #mainNav. Such vertically adjoining margins are generally collapsed; they form one combined margin. Compare this to td borders with border-collapse: collapsed -- these too become just one border, with width equal to the thickest border.

Only vertical margins collapse, and they only collapse if they're adjoining and they're not special. See the spec for full details, but things like absolute positioning, floating, and a few other things will prevent margins from collapsing.

For example, you could set #header { padding-top:1px; }, or you apply one of the spec-described cases which prevent borders from adjoining (such as floating the element). Note that floating and the other cases prevent margins from collapsing to simplify the spec: you're entering complex territory, for little gain.

Your fallback option of using padding instead of margin (or applying any kind of intermediate spacing, like the 1px padding I described earlier) are better choices; they impact the rest of your layout fairly minimally, whereas introducing floats and/or absolute positioning can cause weird interactions once pages get complex (in particular once you start considering printing scenarios).

Answer 4

Well.. simply adding overflow: hidden to the "main" container works.. dont ask me why!