Grow your CSS skills. Land your dream job.

Sticky Footer Problem

  • # September 26, 2010 at 2:40 pm

    I see that there was another post on this sort of thing, but there wasn’t a definite answer given. I would like to share my problem and I hope someone can guide me in the right direction.

    The sample page I made for this is here: “>http://www.originallyricsformusic.com/sampledemo.htm

    I’m trying the sticky footer method from here:Ryan Fait’s site

    What’s happening though, is that the footer is being pushed down when the Height:100% is given to my html and body.
    Ok, that’s good , but if you look below the footer, there is a gap between the browser and the bottom of the footer. It’s also being pushed down below the viewing area even though there is no content pushing it down. I obviously want the footer to be flush with the bottom of the browser. What is causing that?
    For some reason, adding the negative margin to the “container” div and adding the extra “.push” class is not effecting anything. ( I made sure that .push has the same height as the footer.)

    I even tried just using absolute positioning to the bottom for the footer, but of course that cause all kinds of problems between different resolutions.

    My css for the page is Here:

    html, body, div,  applet, object, iframe,
    blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    height:100%;
    }

    #container{
    width:960px;
    margin:10px auto -100px auto;
    text-align:center;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    }

    #header{
    margin:auto;
    text-align:center;
    width:100%;
    height:100px;
    border-bottom-style:solid;
    border-color:grey;
    border-width:3px;
    background-color:#9b5a5d;


    }

    #header img{
    float:left;
    padding-left:80px;
    margin-top:11px;
    width:255px;
    height:78px;
    }

    #nav{
    float:right;
    overflow:hidden;
    padding-right:100px;
    padding-top:20px;
    }

    #nav ul{
    list-style:none;
    }

    #nav li{
    display:inline;
    }

    #nav li.join a{
    width:97px;
    background: url("join.png") top center no-repeat;
    }

    #nav li.sample a{
    width:97px;
    background: url("sample.png") top center no-repeat;
    }

    #nav li.browse a{
    width:97px;
    background: url("browse.png") top center no-repeat;
    }

    #nav li.submit a{
    width:97px;
    background: url("submit.png") top center no-repeat;
    }

    #nav li.login a{
    width:97px;
    background: url("login.png") top center no-repeat;
    }

    #nav li a:hover {
    background-position: bottom;
    }

    #nav li a{
    display:block;
    height:49px;
    text-indent:-9999px;
    float:left;
    }

    #main{
    width:960px;
    margin:auto;
    text-align:center;
    }


    .push{height:100px;}


    #footer{
    width:100%;
    height:100px;
    margin:50px auto 0 auto;
    text-align:center;
    background: url("footerbackground.png");
    background-repeat:repeat-x;
    background-color:#898788;
    clear:both;
    }/code>

    Is there something painfully obvious that I'm missing?

    # September 27, 2010 at 11:52 pm

    Hey, I took a look at the site with Google Chrome inspector (Firebug would work if you want to look).
    Your problem is that the div “footernav” is taller than the footer.
    Changing the height of footernav fixes this problem

    # October 1, 2010 at 10:16 pm

    Will, thanks for the reply, but that didn’t work! I don’t have a height specified for footernav. I did try adding the same 100px height to it though, but that didn’t help. UGH! I don’t get it!

    # October 2, 2010 at 3:32 pm

    You have an issue with margins and padding. If you remove the margins from “footernav” and add margin-top: 20px; to “footernav ul”, the sticky footer will work.

    # October 3, 2010 at 2:03 pm

    That did it! Geez. It was so simple! Thank you so much virtual!

    # May 5, 2012 at 5:57 pm

    There’s a very simple solution.Try this,
    #footer{
    position:absolute;
    bottom:0;
    }

    # May 6, 2012 at 7:09 am

    If only, raj, if only… ;)

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

You must be logged in to reply to this topic.

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