Forums

  • # 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

    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: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: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 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag