Grow your CSS skills. Land your dream job.

[Solved] Dealing with footers

  • # November 24, 2009 at 7:37 pm

    OK guys, I’ve had a common issue that I’ve never been able to completely solve:

    I have a div labeled footer that I want to stay at the bottom of the page but I want it to move down as content grows. If I position it as fixed content will scroll behind the footer, i if I position it as absolute the footer will show at the bottom of the page but as content grows the content goes behind the footer and the footer scrolls instead of staying attached to the lowest point and moving down with the text. If I use relative the footer has a big gap below it until the content pushes the footer to the bottom of the screen.

    I want the footer to stay at the bottom even with no content, once content grows to the point where scrolling is needed the footer moves down with the content. I have never found a good solution to this issue. I’ve tried searching for it but I cant find the best keyword combo.

    concept in code:

    Code:

    Code:
    body
    {
    margin: 0;
    padding: 0;
    }
    #blue
    {
    background: #ffffff url(images/blue.png) repeat-x top left;
    width: 100%;
    height: 316px;
    margin: 147px 0 0 0;
    padding: 0;
    }

    #footer
    {
    position: relative;
    background: #ffcf01 url(images/gold.png) repeat-x top left;
    width: 100%;
    height: 102px;
    bottom: 0;
    padding: 0;
    }

    .content
    {
    width: 100%;
    }

    This will cause the footer to but up against the content. as content grows the footer moves down. I wan the footer to stay at the bottom until the content fill in the available space then start to move down.

    Make sense? Any ideas?

    # November 24, 2009 at 7:59 pm

    I just saw another post from someone working on this. I just searched Google and found there’s a couple people who have claimed to fix this. This one looks like it works well:

    http://matthewjamestaylor.com/blog/keep … f-the-page

    (I searched for "css footer at bottom of page")
    [img]http://www.websitesinaflash.com/images/thumbsup.gif[/img]

    # November 25, 2009 at 12:46 am

    That was a great find. it was an easy fix too. kinda feel stupid on this one. lol!

    # November 25, 2009 at 3:13 am

    Thank you so much for this fix, I am definitely going to bookmark it for future use. I posted a topic last week sometime and tried out a few fixes but just couldn’t make it work until now.

    # November 25, 2009 at 9:00 am

    It seems to have a problem though now, my footer will not move down when I have a lot of content.
    http://olympiafitnesscentre.com/

    How on earth do I solve this problem
    I used the fix below first
    http://ryanfait.com/resources/footer-st … m-of-page/
    but that does not seem to help either. I took my footer out of the container for that fix but it still move up when content was less

    # November 25, 2009 at 1:04 pm

    You have to follow the tutorial exactly.

    1) Put your Footer back into the Container Div.
    2) add 162px of padding-bottom to the container div.
    3) Remove "height:100%" from your container div.

    That should fix it.

    # November 26, 2009 at 2:19 pm

    ok thank you, will let you know when I have tried.

    # November 30, 2009 at 2:33 pm

    Thank you so much it worked.

    # November 30, 2009 at 2:47 pm

    Excellent! [img]http://www.websitesinaflash.com/images/thumbsup.gif[/img]

    # December 1, 2009 at 6:13 am

    Thank you.

    I have one more problem, I managed to fix all other pages except one http://olympiafitnesscentre.com/tips.php I cannot get the footer to move down. What do I need to do?

    # December 1, 2009 at 1:31 pm

    Remove the Float: left from .TabbedPanels (line 30?)

    When you float an element, it stops taking up space in your design, so it stopped pushing your footer down.

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

You must be logged in to reply to this topic.

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