Get a free trial // Grow your CSS skills // Land your dream job

Stuck with sticky footers..

  • # March 27, 2009 at 4:32 am

    I have been working on the footer of this site ( for over 3 hours now and simply cannot get it to stick the way i need it to.

    Issue#1: I have been trying 2 methods:
    1) by Ryan Fait ( … m-of-page/)
    2) "New Sticky Footer 2009" ( … -code.html)

    Neither however allow me to create a gap between content and footer that is different to the height of the footer itself.
    eg.: my footer div is 100px in height, and i need a gap between the end of the content div and the beginning of the footer of 20px.

    The other issue is that while method (1) works in FF 3 it creates a gap below the footer in Safari.

    While method (1) somewhat works in FF3 even there it creates a permanent gap of 100px between content and footer even though the page is longer than 1 window length so there are scrollbars and theoretically it should only have a 20px gap between the content and the footer.

    I’m hoping someone here can solve this mistery because I am absolutely lost with the sticky footer business on this site.

    Also are there javascript/jQuery alternatives to this complicated css issue?
    And last but not least:

    PS: If you prefer downloading the actual files rather than using something like Firebug while on the site I have uploaded them inside a 24kb zip archive here:

    # March 27, 2009 at 7:34 am

    Perhaps you could try daGUY’s solution:

Viewing 2 posts - 1 through 2 (of 2 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