Grow your CSS skills. Land your dream job.

need footer pushed to bottom of page

  • # October 15, 2012 at 10:12 am

    I am having a hard time pushing my footer to the bottom of the page, and not having it depend on the amount of content. I tried http://ryanfait.com/sticky-footer/, but it didn’t work. Below is my code, any help would be appreciated!

    .container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -42px; /* the bottom margin is the negative value of the footer’s height */
    }

    #footer {
    color: #ffffff;
    float: right;
    text-align: right;
    bottom: 0px;
    }

    #footer, .push {
    height: 42px; /* .push must be the same height as .footer */
    }

    # October 15, 2012 at 10:13 am

    note: “footer, .push” should be “#footer, .push”

    # October 15, 2012 at 10:16 am

    I’d go with absolute positioning. It seems accurate to me in your case.

    #footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    }
    # October 15, 2012 at 10:36 am

    @HugoGiraudel Wouldn’t that put the footer at the bottom of the browser window, not below the content?

    # October 15, 2012 at 10:40 am

    Isn’t that the point?

    # October 15, 2012 at 10:46 am

    Sorry, I should have been more clear. I have many pages on this site with varying amounts of content (some a couple words, some long paragraphs). My goal is to have the footer below the content, and at the bottom of the page.

    # October 15, 2012 at 10:52 am

    Then I confirm: I’d go with position: absolute.

    # October 15, 2012 at 11:02 am

    @ashapanka Is it me that’s not understanding what you’re saying?

    Do you want this: http://grab.by/gLuc

    or this: http://grab.by/gLum

    # October 15, 2012 at 11:02 am

    look at this, you’ll see the problem: http://jsfiddle.net/sNtxg/

    # October 15, 2012 at 11:03 am

    bingo! http://grab.by/gLum is what I need…I can’t have my footer overlap content.

    # October 15, 2012 at 11:04 am

    That’s what I figured. I’m having the same issue on my upcoming site which I haven’t been able to figure out as well. I hope someone else can help you.

    # October 15, 2012 at 11:04 am

    You need to add 100% height to the body and html.

    http://jsfiddle.net/Cxddw/1/

    # October 15, 2012 at 11:37 am

    Thanks! I actually already added this line to my css (forgot to mention it above) but the footer is still right below the content, rather than pushed to the bottom. Is there something that can be undoing this style?

    # October 15, 2012 at 11:39 am

    It’s working in the Fiddle so something else must be going on.

    Without seeing a live site it’s difficult to comment.

    # October 15, 2012 at 11:47 am

    I understand. I did some research and it looks like adding “clear: both; ” to the footer might fix my problem.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

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