Grow your CSS skills. Land your dream job.

help with sticky footer

  • # May 2, 2012 at 12:35 am

    For the life of me, I cannot get the sticky footer working on my site. I am making this template for someone and she wants the footer to be sticky, I can’t get it working.

    Here is footer I am using
    http://ryanfait.com/sticky-footer/

    all the code is in place but it just won’t go down. Here is the site

    http://www.rc-hc.com/test

    can you figure out what is wrong? I have been trying for two days

    # May 3, 2012 at 12:13 am

    First of all it seems as if you are getting a 404 on one of your reset.css reference. I thought I would mention that in case you did not realize it.

    Second, I believe I have found the right combo of things to make this work.


    /* These are the only things that need to change:*/

    /* This was the crucial change, taking out the position and top properties. */
    #footer {
    height: 150px;
    width: 100%;
    background: url(images/footerBackground.jpg) repeat;
    }

    /* Removed the height to fix page spacing issue at the bottom.*/
    #footerContent {
    position: relative;
    width: 960px;
    margin: 0 auto;
    }

    /* Because of the content positioning on this page, the hieght of .push needs to be increased; to compensate for spacing issues. */
    .push {
    height: 200px;
    }

    # May 3, 2012 at 12:45 am

    Well, that does work, but only half way. My big problem is that the footer needs to start about where the phone is and extend down the page. It works great the way you have it but it doesn’t start in the right place according to the design requirements.

    Here is the original and this is what it needs to look like except with the sticky footer that extends 100% length and 100% height.

    http://www.rc-hc.com/pizza/

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

You must be logged in to reply to this topic.

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