Grow your CSS skills. Land your dream job.

CSS Sticky Footer Problem

  • # January 9, 2013 at 8:06 pm

    Hi all,

    I’m trying to get a CSS Sticky footer (cssstickyfooter.com) made, but I’m having problems with it.

    It seems like it’s halfway working, but the footer seems to be longer at the bottom and not actually sticking to the bottom.

    http://www.pearsonresource.com/about-us/

    Here’s my CSS code…
    html, body { height: 100%; }
    #container {
    margin: auto;
    width: 960px;

    min-height: 100%;

    }
    #subcontainer {
    overflow:auto;
    padding-bottom: 97px;
    }
    #footer-5, #footer-7, #footer-9, #footer-11, #footer-13, #footer-15, #footer-17 {
    clear: both;
    position: relative;
    width: 100%;

    margin-top: -97px; /* negative value of footer height */
    height: 97px;
    }

    Pardon the amount of footers, they wanted a different color footer for each page. Also, pardon the tabs…I just wanted to tab the changes for the sticky footer parts in case I needed to take them out if they weren’t working.

    # January 9, 2013 at 8:17 pm

    [Sticky Footer...](http://css-tricks.com/snippets/css/sticky-footer/ “”)

    Use classes instead all those footer id’s to change appearance of footer

    # January 9, 2013 at 8:17 pm

    Edit: I understand what you mean now. The content in the footer extends the full width of the window, while the rest of the page is constrained to 960px.

    This code should help.

    .footer_content {
    width: 960px;
    margin: 0 auto;
    }

    # January 9, 2013 at 8:58 pm

    Hi Jurotek, good point on the footer id thing. I didn’t think of that.

    I adjusted my code to the sticky footer link, but I’m still seeing the problem show up. I am stumped completely.

    # January 9, 2013 at 9:01 pm

    Thank you hotpink…I forgot to center (margin auto) the content inside the footer.

    Much appreciated.

    Still I can’t figure out why it goes further down the page though. :(

    # January 9, 2013 at 9:02 pm

    @robertallen, [Here is another example of sticky footer...](http://ryanfait.com/sticky-footer/ “”)

    # January 9, 2013 at 9:03 pm

    Yep, that’s the one I was going off of actually.

    There is something not right elsewhere.

    Obviously I renamed #wrap to #container, #main to #subcontainer…I’m set in my ways there…but, the code is all right in the CSS…and yet, it’s too far down the page.

    I don’t get it :(

    # January 9, 2013 at 9:18 pm

    http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ – Does not inlude the fix for IE/Opera therefore does not work in all browsers. Uses min-height:100%; height:auto !important; height:100%; bit which brings about some bugs in different situations. Here is one of many threads where Paul O’B explains why http://www.sitepoint.com/forums/showthread.php?790129-help-with-sticky-footer-that-is-not-sticking-to-bottom. The footer is positioned outside the wrapper. The inluded demo is somewhat simple to learn from – albeit wrong.

    Try your hand at mine. I also explain why all the others fail – or excell. http://www.visibilityinherit.com/code/css3-sticky-footer.php

    # January 9, 2013 at 9:34 pm

    @robertallen, also if you’d change header top margin to header top padding it would help. With margin the container gets 30px taller and pushes footer down by that much, with padding it would not happen

    BTW, just go with what @Eric has to offer, he got some good examples there

    # January 9, 2013 at 9:51 pm

    As @jurotek pointed out, the use of a top margin on the header is causing the footer to be pushed down. A full rewrite would probably be a cleaner approach, however I think your current code can work.

    Change from

    #header {
    margin-top: 30px;
    }

    To

    #header {
    padding-top: 30px;
    }

    Another source of extra spacing is the #footer { margin-top }

    The footer height is set to 97px, however there is a 7px border applied to the top. So the computed height is 104px.

    Change from

    #footer {

    margin-top: -97px;

    }

    To

    #footer {

    margin-top: -104px;

    }

    # January 9, 2013 at 10:00 pm

    @hotpink,

    > Another source of extra spacing is the #footer { margin-top }

    good catch, I wasn’t too thorough

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

You must be logged in to reply to this topic.

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