Grow your CSS skills. Land your dream job.

Sticky Footer Method

  • # February 6, 2013 at 8:50 pm

    I am using a sticky footer method and it works just fine on my front page, but not so much on any of the other pages. Other than the front page, the only other page I have a design for at the moment is my contact page. It is all using the same stylesheet, so I am rather clueless as to why it is not working. The method I am using, uses this code for the main-column:

    #main-column {
    padding-bottom: 70px; /* Must be same height as the footer. */
    }

    And this code for the footer:

    #footer {
    margin-top: -70px; /* Negative value of footer height. */
    height: 70px;
    }

    What am I missing? I am sure it is something terribly simple as usual. Thank you in advance!

    Edit: I believe this is the site I originally got the concept from about a year ago.

    # February 6, 2013 at 9:02 pm

    There is more css in the example that you linked to than you have shown above. Do you have a link to the site?

    # February 6, 2013 at 9:05 pm

    I created anchor tags for the front and contact page, respectively, in my original post. But here is another link to my site.

    # February 6, 2013 at 9:16 pm

    Add this in your CSS:


    footer {
    width:100%;
    position:absolute;
    bottom:0;
    }

    This will position your footer accordingly to the bottom of the page. Basically, “footer” is the wrapper, “#footer” is the inner content. (The div ID nested inside your “footer” element)

    # February 6, 2013 at 9:46 pm

    @JamesMD, I did what you suggested, but it broke my website a little bit. The footer is now floating over the content in the middle of the page. Hrm.

    # February 6, 2013 at 10:50 pm

    I can’t really see where it went wrong originally because you gave the footer an absolute position, and like you said that’s messing things up a bit.

    Having a footer and then have a div id="footer" within it, is a bit silly IMO. I think you were fine with the original code, but you might want to check if #main-column is cleared? Use a clearfix on that one (try giving it overflow:hidden; and see if that works.

    # February 7, 2013 at 12:40 am

    A little confused on what ‘look’ you’re trying to go for but two things I could suggest.

    If you’re looking to make sure that the footer is always at the bottom of your page, then you already have the footer absolutely positioned to the bottom. Just need to give the footer a positioning context of it’s parent. Add:

    .page-wrap { position: relative }

    You can take off the `min-height` as well from your `.page-wrap` as well and put a `overflow:hidden;` on your `#main-column` to allow your content to flow properly.

    If you’re looking for a real sticky footer, you can just do a `position: fixed` to your footer and put a background color on `footer` so content flows behind it. I would just remember to put some padding at the bottom of your `.page-wrap` so that your footer has a place to live.

    # February 7, 2013 at 6:31 am

    If you are using the Sticky Footer method I am thinking of then the footer element should be OUTSIDE of the #pagewrap. then it will naturally come after any other element and the 100% heights and margins/padding etc. will do the rest.

    http://codepen.io/Paulie-D/pen/aFpCu

    # February 7, 2013 at 10:46 am

    @Senff, I agree with you on your comment about there being a #footer, so I have removed #header and #footer, changing the CSS to reflect that. Then I applied overflow: hidden; to #main-column.

    @yeeyang, I added position: relative; to the newly named #wrapper. I also removed min-height and @Senff already suggested the clearfix, so I have done that as well. Although it sounds tempting to have my content appear from behind the footer as you scroll down, I will consider this later, once I have figured out this little problem.

    @Paulie_D, I have placed the footer outside of the wrapper. I also looked at your CodePen and made sure all the proper code was where it should be.

    And with all of that said, the sticky footer is now below the content, but not at the bottom of the page. I have a very small monitor, so to test the footer, I have to hold Ctrl + scroll out with my middle mouse button, and the footer does not stay at the bottom of the page. It stays below the content, which is good, but it does not stay at the bottom if I push out. Thank you for all of your comments, but how do I achieve this effect?

    # February 7, 2013 at 10:53 am

    @mintertweed

    footer {
    position: absolute;
    margin-top: -70px;
    height: 70px;
    border-top: 5px solid #A11517;
    clear: both;
    width: 100%;
    bottom: 0;
    }

    **Edit**: I got rid of the `margin: 0 auto;` too, as it’s not doing anything…

    # February 7, 2013 at 11:06 am

    I believe that on the base level, the page should have TWO elements. One is the footer, and one is all the rest (let’s just call it the “main block”). This main block needs to have a min-height of 100%, so that it pushes the footer all the way to the bottom of the screen.

    However, you have a wrapper, and then three elements within that (including the footer, still!), so the basic structure won’t work there.

    Here’s what I would suggest: first, move the footer OUT of the wrapper. I know you said you moved it out of it, but I still see it in there.
    Then, give the #wrapper auto-height and min-height of 100%, as well as a bottom padding of 70px. And a clearfix, too.
    Finally, give the footer a top-margin of -70px.

    # February 7, 2013 at 11:10 am

    With the method I gave there is NO requirement for positioning of any kind.

    It’s all handled by 100% heights / margins & padding.

    # February 7, 2013 at 12:05 pm

    @Paulie_D, I don’t seem to understand how to use the method you gave. Sorry.

    @ChrisP, okay, I modified the footer. I kept a width of 960px instead of 100% because I only want the footer to span 960px. With 100%, it spans the entire width of the page.

    @Senff: I guess my “main block” would be the body. I gave the body a min-height of 100% and it seems to be keeping the footer at the bottom of the page, even when I scroll out.

    Also, this is literally what my html-footer.php looks like:


    < ?php wp_footer(); ?>

    So, the footer is most definitely out of the #wrapper, but it is still inside the body. Should it also be outside of the body as well? I gave a height of auto, min-height: 100%, and padding-bottom: 70px; to #wrapper. My footer already had a top-margin of -70px.

    Okay, so now all I need to do is center the footer. I thought giving it margin: 0 auto; would do it, but no such luck. So, that is all I need help with now. @Senff, tell me if you still see the footer in the #wrapper!

    Edit: Sigh. I did not think this would be such a task.

    # February 7, 2013 at 12:09 pm

    On your front page the footer still has **position:absolute** applied.

    Take that off and it will center.

    On your contact page the footer is still in the wrapper.

    # February 7, 2013 at 12:15 pm

    I still see the footer within the wrapper. You’ll need to move it out of there.

    Also, you can’t set the body as the “main block”, because you’ll need a footer at the SAME level as the main block. With the body as the main block, you’ll always have the footer WITHIN it.

Viewing 15 posts - 1 through 15 (of 27 total)

You must be logged in to reply to this topic.

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