Question

In this example, why doesn’t the fixed #header (the at the top) start at the top of the page, but in this example it does?

The only difference is that i changed the “margin” of #content to “padding” instead (repsectively).

So why does this tiny change have a huge impact? How do I put the fixed #header at the top of the page while still using “margin” for the #content?

Answer 1

It’s because of collapsing margins.

If the top and bottom margins of a box
are adjoining, then it is possible for
margins to collapse through it. In
this case, the position of the element
depends on its relationship with the
other elements whose margins are being
collapsed.

In this case, the margin can push down the #header (that has position: fixed) unless you give it a top value other than the default of auto.

A way to fix this is to add overflow: hidden to #wrapper: http://jsfiddle.net/CyaJ8/6/

This works because:

Margins of elements that establish new
block formatting contexts (such as
floats and elements with ‘overflow’
other than ‘visible’) do not collapse
with their in-flow children.