Grow your CSS skills. Land your dream job.

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(http://cdn.css-tricks.com/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 bunch of text….

     


# September 11, 2008 at 3:10 pm

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

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 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
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.

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