I’ve been battling with what seems a small problem. I have a header wrapper, a main wrapper and a footer wrapper. My header wrapper is a fixed div.
I’m trying to get my main wrapper to obey the margin rules of the header wrapper, but no matter what I do it always seems to fall behind the header and aligns to the top of the page.
What you need is a top margin on the main wrapper equal to the height of the header wrapper. The problem is that this margin will extend outside of the main container. There are a couple of ways to prevent that. One is to add overflow: hidden to #container which changes its block formatting context and the children’s margin will be contained within the parent. Another option is to use a top padding or top border on the #container – either of which will again cause the children’s margin to be contained within the parent (rather than extending beyond, which is correct default behavior).
@paulie_d – I love fixed headers and have planned one on my personal site for a while now. I’ve never understood how to correctly go about creating one though.
@CrocoDillon – I’ve specified a height for my header (60px). With top and bottom padding padding it equals 100px high. I’ve added a 120px top padding to my #main_container. Do you think that this is will be an effective way to do it? I’ve specified a height variable for the header. Will this prevent minor inconsistencies between browsers?