Grow your CSS skills. Land your dream job.

Stuck with sticky footers..

  • # March 27, 2009 at 4:32 am

    Hello.
    I have been working on the footer of this site (http://www.9d.co.nz/stickyfooter/) 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 (http://ryanfait.com/resources/footer-st … m-of-page/)
    2) "New Sticky Footer 2009" (http://www.cssstickyfooter.com/using-st … -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.

    Issue#2:
    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: http://www.9d.co.nz/stickyfooter/stickyfooterfiles.zip

    # March 27, 2009 at 7:34 am

    Perhaps you could try daGUY’s solution: http://css-tricks.com/forums/viewtopic.php?f=2&t=2009

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

You must be logged in to reply to this topic.

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