The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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:


    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">


    #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


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

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed