CSS and the ever bottom-positioned footer: How to keep your footer where it belongs
In this tutorial I will show you how to keep your footer at the bottom of the page, even if you have little content. The beauty of this is that it uses no hacks. Just plain CSS.
First thing's first...lets get a scenerio going so you can see what I mean.
I want to keep my footer in its place
Suppose you have a website that's pretty normal in respect that sometimes you have lots of content on a page, and other times, you don't. When there isn't much content, you may notice that the footer doesn't stay at the bottom of the screen, and shoots up to sit underneath the content. You could try giving your content a min-height to make it longer, like min-height:800px, but this isn't a very practical way of overcomig the problem.
For this excercise I will be using a full page layout, i.e., my content will stretch to fill the screen. If you want to work with definite measurements, substutute width:100% for whatever value you need.
Let's get going!
To make this work we need to apply some nifty CSS code to our footer, html tag, body and our containint element. Here's the code:
CSS Example
html, body {
height:100%;
margin:0;
}
#container {
min-height:100%;
position:relative;
background-color:#66CCFF;
}
#main {
height:100%;
overflow:auto;
font-size:150%;
clear:both;
}
#footer {
position:absolute;
background-color:#FF6633;
bottom:0;
width:100%;
}
HTML Example
Our layout consists of a container, which holds everything, a div called main which holds our main content and our footer.
<div id="container">
<div id="main">My main content.</div>
<div id="footer">my super, brilliant, cool, amazing, special, awesome, flashy, spectacular footer!</div>
</div>
</div>
Result with very little content
Result with lots of content
For illustrative purposes, I have given the footer in these two images a height of 40px. If you wish to give your own footer a height, remember to add this figure to the bottom padding of the div above it - in our example, the #main div - otherwise the footer will overlap it.
#main {
height:100%;
overflow:auto;
font-size:150%;
clear:both;
padding-bottom:40px;
}
In case you were wondering, the poem in the second image is "Jabberwocky", by Lewis Carroll.
Explination
By giving the html and body a height of 100% we are telling them to expand vertically to fill the screen. Giving our container a min-height of 100% ensures that it doesn't become smaller than the screen. Now, adding bottom:0 to our absolutely positioned footer, ensures that it always stays at the bottom of the page.
A side note
Just a word on margins. You must make sure that your margins are set to zero in the html and body, otherwise this will happen:
Arghh! scrollbars!!
Unwanted scrollbars will appear! This is because the container fills the screen so when the body's margins aren't set to zero, they contribute to the space on screen, causing the content to become too big. Remove the margins and the content fits like a glove.
Got any questions or comments? Feel free to mail me @ helen@alternategateways.com.
Back to resources.