Hi, This is hard to explain, so I've put up a sample page at the bottom of this post. Essentially, I have a container that is centered with auto margins, and has a top margin of 40px. As expected, it is 40px down from the top of the document. However, even though I have added 0 padding and 0 margin to the body, when I use web developer tools to view style info, it shows the body as being 40 px from the top of the view port as well. If I place a div with 0 margin and 0 padding directly after the opening body tag, it too has the same margin top as its sibling, the container div. Please see: www.webmechanic.ca/ottavio/ and click on the "view background" link to see the white test div jump up to the top of the viewport as soon as the container div disappears, and pop back down when it returns. AAARGGGH! Thanks in advance.
What your experiencing is Collapsing Margins. One way to get the effect you want is to use padding instead of margin: #container { margin:0 auto; padding:40px 0 0; position:relative; text-align:left; width:1030px; } Code (markup):
It seems to be related to the behavior of the "position:absolute" present in your elements, namely the one for #test. If you remove it, it won't have the problem.