Extend footer to bottom of window

  • mistermango

    #3940

    I can’t figure out how to force my footer all the way to the bottom of the browser window. It’s fine if there is enough page content for a scroller. However, for short pages, the footer ends and the background color fills in to the bottom of the window.

    Also, I’ve removed the footer from the <div> container </div>, in order to allow the footer to repeat-x. That works fine for the footer menu section, but the copyright section of the footer (below the menu) is restrained to the size of the width I’ve defined. But if I don’t define the width of #copyright, I can’t center the content.

    My code is below. The site, under development is: http://www.internationalfocusnc.org.

    Thanks.

    /* =Footer
    
    */

    #footer {
    background: #495677;
    background-repeat: repeat;
    color: #ffffff;
    border: 0;
    margin: 0;
    padding: 20px 0px 10px 0px;
    }

    }
    #footer a,
    #footer a:visited {
    color: #fff;
    text-decoration: none;
    }
    #footer a:hover {
    border-bottom: 1px dotted #fff;
    }
    .footer-menu-wrap {
    width:960px;
    position:absolute;
    left:50%;
    margin-left:-480px;
    font-size: 14px;
    float: none;
    text-align: left;
    }
    .footer-menu-wrap li {
    width:110px;
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
    }
    .footer-menu-wrap a,
    .footer-menu-wrap a:visited {
    color: #fff;
    }
    .footer-menu-wrap ul.sub-menu {
    margin-top: 5px;
    padding: 0;
    border:0;
    list-style: none;
    }

    .footer-menu-wrap ul.sub-menu li {
    display: block;
    font-size: 12px;
    line-height: 18px;
    border: none;
    margin: 0;
    padding: 0;
    }
    #footer-menu {
    text-align: left;
    }
    #footer-menu .sub-menu li a,
    #footer-menu .sub-menu li a:visited {
    color: #ccc;
    }

    #copyright {
    background: #495677;
    background-repeat: repeat;
    width:960px;
    position:absolute;
    left:50%;
    margin-left:-480px;
    text-align: center;
    float: none;
    padding: 140px 0px 10px 0px;
    }

    #copyright h3 {
    display: none;
    }

    #copyright p{
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    margin: 0;
    }

    mistermango

    #26660

    Well, I figured issue #2 out. It was the defined width. I achieved success by adjusting the code to this:

    #copyright {
    background: #495677;
    background-repeat: repeat;
    width: 100%;
    float: none;
    position: absolute;
    text-align: center;
    float: none;
    padding: 140px 0px 10px 0px;
    margin: 0;
    }

    I still have the issue of the footer not extending to the bottom of the browser window, though. Is this something I can achieve with CSS or do I need to adjust some code in footer.php?

    Thanks.

    Tee

    #26661

    I don’t get what your trying to say, your footer does extend to the very bottom of the browser.

    mistermango

    #26662

    Check out this page: http://internationalfocusnc.org/resources/. I’d like the blue to repeat-y. Instead I’m getting the background color filling in beneath the footer.

    This is an extreme example, as I don’t have content in yet, but I envision pages where there won’t be enough content to force the footer all the way to the bottom. I could set a min-height to the content div, but that would create awkward white space between the content and the footer.

    Thanks for looking.

    Tee

    #26663

    try this

    #copyright {
    background: none repeat scroll 0 0 #495677;
    float: none;
    margin: 0;
    padding: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
    }
    Mod

    Kenneth John Odle

    #26664

    Well, you’ve hit on a big issue in CSS: a <div> will only extend as far as its content. As you point out, it’s not so much the footer that is the issue as it is that there is not enough content to push it to the bottom.

    I had this issue with the sidebar on my main website. No matter how I tried, there just wasn’t a way through pure CSS to get it to extend to the bottom when there is more content in the main section. I ended up just wrapping the sidebar in a border with rounded corners. It looks good, but it’s not what I wanted.

    There are solutions to this, but they involve either absolute positioning or javascript. Try googling “push <div> to bottom of page” or something similar and I’m sure you’ll find something that you can get to work (short of inserting lorem ipsum in empty pages).

    You do ask interesting questions, Mister Mango. (I see you got the menu issue figured out — nice!)

    mistermango

    #26665

    I was able to achieve the look I was going for by placing minimum height on my main content area. It was not the solution I wanted to find, but will work.

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

You must be logged in to reply to this topic.