eVisitNepal

CSS footer |solve the sticky footer at bottom

This tutorial assumes a few things: 1. That you know basic HTML formatting, and 2. That you have a pretty good understanding of CSS.

So first we need to make sure that everything except the footer is inside a container div. So your code would look something like this:

<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
  </ul>
  </div>

Content Here.

< !—End Container—>

Now that you’ve got your basic HTML set up, let’s head over to the CSS and see what we need to do there to get it to work. First, we want to give the html and body tags a height of 100%:

html, body {
height: 100%;
}

Next, we need to set the container div to position:relative, min-height: 100% and negative margin the bottom the height of the footer. What? A fixed height footer you say? Yes, I haven’t quite figured out the best way to do it otherwise:

container {

min-height: 100%;
margin-bottom: -330px;
position: relative;
}

Now, onto the footer. Make sure the height on the footer matches the height of the negative margin on the container and set the position to relative:

footer {

height: 330px;
position: relative;
}

What’s that? Yes, I know it doesn’t work yet. There’s still a bit of magic to be done. See it turns out we need a div to help separate the footer from the container. We’re going to call it clearfooter. So jump back to your HTML and add the div class right inside the closing div of the container. That’s very important. Inside the closing div:

<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
  </ul>
  </div>

Content Here.

< !—End Container—>

Head back over to your CSS file and add this to the clearfooter div. Notice the height again:

.clearfooter {
height: 330px;
clear: both;
}

Alright! So for those of us using browsers that aren’t stupid, this should work great. But 80% of use that one browser that is stupid, our friend Internet Explorer 6. Thankfully, it’s a pretty simple fix. I know, how often does that happen? First of all, you should know that IE7 should work fine with what we’ve done up to this point. So all we need is an IE6 specific “hack.” In your header where you’re calling your external stylesheet put this:

< !—[if lt IE 7]>

< ![endif]—>

This is a conditional statement for IE6 so it will load the CSS file only in that browser. In the CSS file, all you have to put is:

container {

height: 100%;
}

So there you have it! This works in IE 6 and 7, Firefox and Safari 2 and 3. I hope you’ve found this a useful tool in your CSS arsenal. If you know a better way, please let us know in the comments!

Leave a Reply

Your email address will not be published. Required fields are marked *