The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Sticky Footer and H1N1

  • # November 5, 2009 at 7:29 pm

    Hi all,

    I’m quarantined in my studio with the dreaded H1N1 and so working on a new site design. Maybe it’s the fever, coughing, or sneezing, but something is preventing me from getting a sticky footer to work on my new site. I’ve only used it a dozen times on other sites. In my delirium I seem to be incapable of finding the reason why it’s not working.

    In reality, it’s probably so simple that I’ll be embarrassed two week from now when I’m well and call think clearly. In the meantime, if anyone is willing to humor me and take a looksey to see what I’m doing wrong I would be very appreciative.

    Here is my DEV link:

    My style sheet is here:

    Thanks mates for any and all input.


    # November 6, 2009 at 6:35 am

    This reply has been reported for inappropriate content.

    html, body {
    height: 100%;
    # November 9, 2009 at 10:00 pm


    Thanks for helping me see the obvious.

    I still seem to have an issue with it though. Regardless of how much content is on the page I get scroll bars appearing due to the sticky footer. I’m noticing that this doesn’t happen on other sites using this method.

    I’ve been over the code a dozen times and can’t find the error.

    Anyone have any thoughts?

    Here is the current page again:
    Style sheet:

    thanks for any and all input

    # November 10, 2009 at 5:51 am

    This reply has been reported for inappropriate content.

    From Ryan Fait’s sticky footer page:

    No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS.

    Put the #masthead div and all its contents inside #page-wrap.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed