Grow your CSS skills. Land your dream job.

Help! Position Footer to bottom of page?

  • # June 19, 2009 at 12:58 pm

    Hi. I have been going out of my mind trying to position a footer to the bottom of the page. I’ve tried all the techniques I could find online i.e. Ryan Fait’s CSS sticky footer http://ryanfait.com/sticky-footer/, Matthew James Taylor’s technique http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page and even this one http://www.cssstickyfooter.com/. I have tried to put the footer within the container and outside. Here is the test page http://blueturtlegraphics.info.s62344.gridserver.com/index.html. As you can see, there is a white gap underneath the footer. I am viewing in FF and Safari and it doesn’t work in either.

    Would love it if someone can point out what I am doing wrong. Thanks!

    Here’s the CSS

    Code:
    body {
    background-image: url(images/body_bcknd.jpg);
    background-repeat: repeat-x;
    }
    body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    }
    h1 {
    font-size: 24px;
    color: #003C68;
    letter-spacing: 0.75px;
    }
    h2 {
    font-size: 20px;
    color: #003C68;
    font-variant: small-caps;
    letter-spacing: 1.5px;
    }

    /*
    960px grid system ~ Core CSS.
    12 Columns ~ Margin left: 10px ~ Margin right: 10px
    */
    @import ‘reset.css';

    /* =Containers
    ——————————————————————————–*/
    .container_12
    {
    width: 960px;
    background-color: transparent;
    margin: 0 auto;
    }

    /* =Grid >> Global
    ——————————————————————————–*/
    .grid_4, .grid_8, .grid_12 {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    }

    /* =Grid >> Children (Alpha ~ First, Omega ~ Last)
    ——————————————————————————–*/
    .alpha {margin-left: 0;}
    .omega {margin-right: 0;}
    .container_12 .grid_4 {width: 300px;}
    .container_12 .grid_6 {width: 460px;}
    .container_12 .grid_8 {width: 620px;}
    .container_12 .grid_12 {width: 940px;}

    /* =Prefix Extra Space >> 12 Columns
    ——————————————————————————–*/
    .container_12 .prefix_4 {padding-left: 320px;}
    .container_12 .prefix_8 {padding-left: 640px;}

    /* =Suffix Extra Space >> 12 Columns
    ——————————————————————————–*/
    .container_12 .suffix_4 {padding-right: 320px;}
    .container_12 .suffix_8 {padding-right: 640px;}

    /* `Clear Floated Elements
    —————————————————————————————————-*/
    /* http://sonspring.com/journal/clearing-floats */
    .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    }

    /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
    .clearfix:after {
    clear: both;
    content:’ ‘;
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
    }

    .clearfix {
    display: inline-block;
    }

    * html .clearfix {
    height: 1%;
    }

    .clearfix {
    display: block;
    }
    .container_12 .grid_12 #header {
    background-image: url(images/btg_header.jpg);
    background-repeat: no-repeat;
    height: 152px;
    }
    .container_12 .grid_12 #header #topnav {
    width: 630px;
    margin-top: 5px;
    padding-top: 8px;
    }
    .container_12 .grid_12 #header #logo {
    width: 220px;
    padding-top: 25px;
    }
    .container_12 .grid_12 #intro {
    margin: 30px 330px 30px 0;
    clear: both;
    position: absolute;
    width: 600px;
    }
    #callout {
    width: 295px;
    float: right;
    background-image: url(images/postit.jpg);
    height: 250px;
    background-repeat: no-repeat;
    margin-top: 20px;
    background-position: 15px 0;
    }
    #recentheader {
    margin-bottom: 12px;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #00AFDB;
    padding-bottom: 5px;
    }
    #homebody {
    width: 960px;
    height: 175px;
    margin: 22px 0 12px 0;
    }
    .footerwrapper {
    background-image: url(images/footerbcknd.jpg);
    background-repeat: repeat-x;
    margin: 0 auto;
    height: 120px;
    }
    .footer {
    background-image: url(images/btg_footer.jpg);
    background-repeat: no-repeat;
    height: 120px;
    width: 960px;
    margin: 0 auto;
    padding: 0 10px;
    }
    #footersocial {
    float: right;
    width: 460px;
    padding-top: 20px;
    }
    #footeraddress {
    width: 460px;
    padding: 20px 0 0 10px;
    margin-right: 500px;
    }

    # June 19, 2009 at 1:41 pm

    I just had a go with the Ryan Fait method in firebug and it worked without any problems.
    So in your markup add an empty div with a class (or id) of push just before the closing div of the main container.

    Code:

    Then add these rules to the css

    Code:
    html, body {
    height:100%;
    }
    .container_12 {
    background-color:transparent;
    height:auto !important;
    margin:0 auto -120px;
    min-height:100%;
    width:960px;
    }
    .push {
    height:120px;
    }
    # June 19, 2009 at 2:03 pm

    Hallelujia! Thanks you so much. I think when I tried this technique I had the push class in the wrong place.

    Now, how do I get the footer to stretch across the width of the page. I have "footerwrapper" width set to 100%. Shouldn’t that work?

    http://blueturtlegraphics.info.s62344.gridserver.com/index.html

    # June 19, 2009 at 2:13 pm

    Take the very last div closing tag (the one just before </body>) and put it before <div class="footerwrapper">

    # June 19, 2009 at 2:22 pm

    Thank you for responding! Of course I get the div tags messed up. Need to work on that.

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

You must be logged in to reply to this topic.

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