Grow your CSS skills. Land your dream job.

Floating Footer – how to keep down?

  • # April 5, 2008 at 3:14 pm

    Hey all,
    Just getting started with CSS, and this site has been a HUGE help, but I’m running into an issue that I haven’t figured out how to correct yet.

    On pages that have enough text in the content area, my footer stays down low, moving with the length of the text, just like it is supposed to do. The problem comes when there is a page with very little text. The floating footer stays with the text area, and is either on top of or behind my sidebars.

    You can view the page here: http://www.robchinn.com/indyfcpug/

    Here is a page showing the problem: http://www.robchinn.com/indyfcpug/reviews.html

    I have one idea (set up another stylesheet for pages with little text, and increase the margin-top on the footer), but I’m sure there has to be a better way, and I’m willing to bet one of you know how!

    Thanks for the help!

    # April 5, 2008 at 3:22 pm

    I think the simple solution is to give a minimum-height to the main div.

    So try this:

    #content {
    min-height:500px;
    height: auto !important;
    height: 500px;
    }

    This will turn the minimum-height of your content box to 500px, so it will always be at least 500px high.

    # April 5, 2008 at 5:30 pm

    Edwin,

    Thanks so much for the quick response! Worked perfectly.

    One question though – after specifying height: auto, do you need height:500px? Just curious.

    Rob

    # April 5, 2008 at 6:36 pm

    Yep, you need that too, that’s for IE 6 and below. More info here:

    http://www.dustindiaz.com/min-height-fast-hack/

    # April 5, 2008 at 7:42 pm

    In good browsers "min-height: 500px;" would be enough, but as you probably allready know, ie6 isn’t that good browser and often you need to fix things for it. And because of there are still many people using ie6, better don’t ignore ie6 ;)

    # April 6, 2008 at 11:50 pm

    Thanks for the explanation. I left it out, so I guess I’ll put it back in, even though we don’t get any traffic from IE6 (we are a mac user group after all).

    Thanks for all the help and the great site/forums. I’m sure I’ll be spending a lot of time here (the screencasts are great Chris) as I get up to speed with CSS.

    Rob

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

You must be logged in to reply to this topic.

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