The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Sticky footer not so sticky

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #25660


    I’m using Ryan Fait’s sticky footer, but the glue I’m applying doesn’t appear to be sticky enough.

    #wrapper {
    width: 928px;
    margin: 0 auto -250px;
    min-height: 100%;
    height: auto !important; height: 100%;
    background: url(images/bg.jpg) top center no-repeat black;
    #push { height: 250px; }

    #footer {
    width:928px; margin: 0 auto; height: 250px;
    background: white; border-top: 4px solid #333333;
    padding-top: 20px;
    color: black;

    HTML structure:

    floated content

    My footer.php looks like this:

    Troubleshooting I have done:
    I have looked over the code for margins that might mess it up, but haven’t been able to locate any that pose a problem, tried changing the height of the push.


    I added height: 100%; to the html tag and suddenly it almost works.

    The footer gets pushed down a little bit too far, resulting in a vertical scrollbar appearing. See for yourself here.

    My margin on the wrapper div is -50px, push is 50px and footer height is 50px.

    I cleaned my code thoroughly and replaced all margins with padding, I have no clue why the footer is pushed down too far.

    I got rid of the scrollbar by reducing the height of the footer to 26px – then it all works perfectly, but I’m really not sure what will happen when I keep adding elements to my page. I would like it to work how it is supposed to, so that I don’t have to change the footer height all the time.

    Please help :).


    Ah finally!. Thanks you so much apostrophe.

    I had tried removing that padding earlier, that must of been before I added the 100% height to the html, never crossed my mind to try it again. Cheers!

    The border is what pushes it down another 4px, I’ll have to add that to the push & margin.

    Solved finally :mrgreen:. Webdesign is so much fun when things work!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.