Grow your CSS skills. Land your dream job.

Keeping the footer down

  • # February 2, 2010 at 9:55 pm

    Hi, I have a problem with a site I’m building it’s almost ready but since I don’t have much content for some of the inner pages I see that the footer sit halfway up the page leaving a blank space underneath, I know if I give a fix height to the content area the footer would stay down but I want the footer to be able to move down further when I add more content. I found a solution that included positioning the footer div absolute but I don’t like to position things absolute or fixed unless that’s the last option. In firefox the footer appears at the bottom of the viewport even thought there’s no content I have this problem in Chrome and Safari, I hope you guys can help me, here’s the website configuration:

    Html:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">




    CSS:

    Code:
    #wrapper {
    position: relative;
    min-height: 700px;
    height: 100%;
    }

    .container { width:900px; height: 100%; margin: 0 auto;} /*Centers both container classes*/

    #content {
    position: relative;
    overflow: hidden;
    }

    #footer .container {position: relative; width: 900px; height: 174px; overflow: hidden;} /*174px is height of the footer bg*/

    # February 2, 2010 at 11:01 pm

    http://ryanfait.com/sticky-footer/

    Maybe?

    # February 3, 2010 at 3:48 am

    Thank you so much nStyle, It worked great, I have a question that’s not documented in the developer’s site, That div with the class "push" is really necessary ? Cause I didn’t add it and it still works but maybe I’m missing something and It’s important for something. Thanks again bro.

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".