Grow your CSS skills. Land your dream job.

Main wrapper sits behind fixed header.

  • # February 13, 2013 at 10:00 am

    Hello everyone,

    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.

    If you have a look at http://www.inlmbrt.com/profile/ you will see what I mean.

    Any help would be greatly appreciated. :)

    # February 13, 2013 at 10:10 am

    Try taking the #header-container itself out of your #container.

    You might need to center (margin:0 auto) that but it should work.

    BTW…is there a reason why you WANT to fix your header…is that page going to be that long/tall that it needs to be visible at all times?

    # February 13, 2013 at 10:11 am

    You can try `padding-top: 101px;` on #main_container

    # February 13, 2013 at 10:13 am

    >You can try `padding-top: 101px;` on #main_container

    A ‘fix’…not a solution. IMO

    # February 13, 2013 at 10:15 am

    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).

    # February 13, 2013 at 10:23 am

    @Paulie_D that’s why I was being careful mentioning that… fix, I don’t know the ‘correct’ way of dealing with fixed headers as I never use them :)

    # February 13, 2013 at 10:28 am

    why is the padding (which is even easier than the margin I explained above, but the OP mentioned margin) a fix and not a solution?

    # February 13, 2013 at 10:32 am

    @wolfcry Because there’s an expressed number in there. If the header changes height then the padding / margin will have to change.

    Of course, I still wonder WHY the header needs to be fixed.

    # February 13, 2013 at 10:47 am

    That said, I do realise that top padding on whatever content container is going to be required…isn’t it?

    I confess that my experience with position:fixed is limited.

    # February 13, 2013 at 10:59 pm

    Hrm… if you were using SASS/SCSS then you could set the header height to a variable and then put the variable into both the fixed positioned header and its parent div.

    # February 14, 2013 at 4:06 am

    Really appreciate the input! :)

    @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?

    If you take a look here http://www.inlmbrt.com/profile/ you will see what I’ve done.

    Thanks again guys.

    # February 14, 2013 at 4:46 am

    I still don’t know if it’s the best way to do it but it works for sure, looked the same even in IE7 – IE10 :)

    # February 15, 2013 at 4:08 am

    I’ve tested it in a number of browsers and it seems to be consistent. Hope this does it! :]

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".