All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

CSS footer to bottom of page – nothing works!

  • # September 11, 2008 at 2:52 pm

    Hello,

    I’ve tried to get my footer to stay at the bottom of the page, but nothing I have tried works. I’ve spent hours researching the answer and tweaking the code to no avail.

    Help.

    My CSS:

    Code:
    @charset “UTF-8”;
    /* CSS Document */

    html, body{height:100%;}
    body>#container{height:auto;}

    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #fff url(/images/bgrnd.gif) 50% 0;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family:verdana,sans-serif;
    font-size:85%;
    color:#000;
    }

    #container {
    position:relative;
    width: 940px;
    background: #FFFFFF;
    margin: 0 auto;
    text-align: left;
    min-height:100%;
    height:100%;
    overflow: hidden;
    }

    #header {
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    background: #fff;
    height:120px;
    border-bottom-style: inset;
    background: url(“images/header.png”) no-repeat;
    background-position: 40px 5px;
    }

    .alignRight {
    float:right; margin-left: 1em;
    }

    #mainContent {
    margin: 0 1.5em 0 13em;
    padding-bottom: 50px;
    height:auto;
    }

    #top-nav {
    float:right;
    }

    #top-nav img{
    position:absolute;
    padding-top:95px;
    margin:0;
    top:0;
    left:715px;
    }

    .clearing {
    height:0;
    clear:both;
    }

    h1, h2, h3, h4, h5 {
    font-family:trebuchet ms,arial,tahoma,verdana,sans-serif;
    font-weight:normal;
    letter-spacing:0.005em;
    color:#696969;
    }

    h1{
    font-size:2.7em;
    font-weight:normal;
    letter-spacing:-.015em;
    border-bottom:1px solid #CC6600;
    background:#fff;
    }

    h2 {

    font-weight:normal;
    letter-spacing:-.015em;
    border-bottom:1px solid #CC6600;
    background:#fff;
    }

    h1, h2, h3, h4, p {
    padding-left:3px;

    }

    a, a:link {
    color:#4F5A9F;
    text-decoration:none;
    }

    a:visited {

    color:#909;

    }

    a:hover, a:active {
    color:#990000;
    text-decoration:underline;
    }

    ul.cred {
    display: block;
    list-style: none;
    }

    .cred li {
    padding-bottom:5px;
    }

    #footer {
    margin: -1.6em auto 0;

    position: relative;
    height:30px;
    background:#DDDDDD;
    border-top: inset #696969;
    }
    #footer p {
    height: 30px;
    font-size:.8em;
    text-align: center
    }

    .fltrt {
    float: right;
    margin-left: 8px;
    }
    .fltlft {
    float: left;
    margin-right: 8px;
    }

    [if IE]>

    < ![endif] #container #mainContent img { padding: 5px; float: right; } @charset "UTF-8"; /* CSS Document */ #left-col { padding-top: 20px; width:12.5em; float:left; } #left-col h2 { font-size:1em; line-height:1.25em; margin:0; border:0; padding:0; color:#f60; } ul.pages { margin:10px 0 0 10px ; } ul.pages, .cross-links { list-style:none; padding:0; font-size:95%; } .pages li { border:1px solid; border-color:#ccc #bbb #b6b6b6 #ccc; margin:0 0 5px 0; padding-right:3px; } .pages li { background:#f1f1f1 url(images/s-bg.gif) top left repeat-x; } .pages li a { padding:.7em 3px .7em 37px; text-decoration:none; display:block; } .pages a, .pages a:link, .pages a:visited { background-position:4px 50%; background-repeat:no-repeat; } .pages a, .pages a:link, .pages a:visited { color:#CC6600; } .pages a:hover, .pages a:active, .pages .on a { background-position:-462px 50%; background-repeat:no-repeat; } .pages a:hover, .pages a:active { color:#80B37A; text-decoration:none; } .p-home a {background:url(images/home.gif);} .p-about a {background:url(images/s-recommendations.gif);} .p-food a {background:url(images/s-process.gif);} .p-testimonials a {background:url(images/s-opinion.gif);} .p-faq a {background:url(images/s-business.gif);} .p-signup a {background:url(images/s-goal-oriented-design.gif);} .pages li a:hover, .pages li.on a { background-color:#fff; color:#80B37A; } top-nav { float:right; }

    My HTML:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    A Site

    a bunch of text….

     


# September 11, 2008 at 3:10 pm

This reply has been reported for inappropriate content.

give a link to your page so that we can see what your footer is doing. You should always include a link whenever possible. This will help us diagnose what your problem is. Instead of trying to visualize it from your code.

# September 11, 2008 at 3:15 pm

This reply has been reported for inappropriate content.

without knowing a whole lot. I see that you have position:relative on your footer. You do know that this takes your footer out of the normal flow of the site right? So maybe things you would be expecting to push on it might not be doing that. I don’t even have a full grasp of that stuff yet.

# September 11, 2008 at 4:25 pm

Here is the link. On the page that doesn’t have a lot of content – the footer is in the middle of the page:

http://patrickprindle.com/testimonials.html

# September 11, 2008 at 4:57 pm

This reply has been reported for inappropriate content.

This is generally the link I give to people who want to get their footer on the bottom of the page:

http://ryanfait.com/sticky-footer/

Pure CSS, pretty elegant really.

# September 17, 2008 at 5:39 pm

Problem solved. Thanks.

# September 23, 2008 at 3:21 pm

This reply has been reported for inappropriate content.

Quote:
I’ve tried to get my footer to stay at the bottom of the page, but nothing I have tried works. I’ve spent hours researching the answer and tweaking the code to no avail.

I did the same once, and when I finally came up with a solution, I documented it so I could refer myself to it in the future. See here.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed