This tutorial post shows how to have a footer appear at the bottom of a webpage using HTML and CSS even if the content for the page is short and doesn’t fill the whole height of the browser window. When then browser is resized it stays at the bottom and moves with the window, but will not overlap the content area. If the content is higher than the browser window then the footer will remain underneath it.
View an example of this here, and then come back to this page for more details.
Browser compatibility
This method has been tested and works in the following browsers, all on Windows:
- Firefox 1.0
- Firefox 2.0
- Firefox 3.0
- Chrome 1.0
- Safari 3.1.2
- Internet Explorer 6
- Internet Explorer 7
- Internet Explorer8 beta
It has been tested and works but the footer doesn’t follow on resize in the following:
- Opera 8.54
- Opera 9.50
The HTML
The HTML for this method is shown below.
<div id="top"></div>
<div id="container">
<p>The content goes here</p>
<div id="footer-spacer"></div>
</div>
<div id="footer">
The footer goes here
</div>
The #top element is an absolutely position element with nothing in it, and is required for the footer to fix to the bottom of the page in Opera (don’t ask me why, I only worked this out by accident). You could alternatively make it <a name="top" id="top"></a> as a named anchor and then have a link like <a href="#top">Back to top</a> in the footer.
All of your content needs to the in #container and the stuff for the footer goes into #footer.
The #footer-spacer div is used at the bottom of the container to make sure there is correct spacing between the content in the container and the footer.
The CSS
The CSS for this method is below. After that is a section by section explanation of what each bit does. These are also commented in the HTML/CSS code of the example page.
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color: #fff;
}
#top {
position: absolute;
}
h1, p {
margin: 0;
padding: 0.3em 0;
}
#container {
min-height: 100%;
margin-bottom: -36px;
}
* html #container {
height: 100%;
}
#footer-spacer {
height: 36px;
}
#footer {
border-top: 1px solid #000;
height: 35px;
}
The CSS section by section
Both the <html> and <body> tags need to have the height set to 100% for this to work:
html, body {
height: 100%;
}
The margins and padding for the top and bottom of the body must be 0. You can still set left-right margins and padding and it will work.
body {
margin: 0;
padding: 0;
background-color: #fff;
}
Opera won’t put the footer at the bottom unless the absoutely positioned div before #content is present. This is an odd thing to make it work and I only discovered it by accident because I had a named anchor in my own layout and IE8 beta was allocating space for it, even though there was no content. Without the absolutely positioned name anchor it didn’t work in Opera.
#top {
position: absolute;
}
If you tags like <h1> to <h6>, <p> etc have margins then it throws the height of the page out (at least in Firefox) and you always end up with vertical scrollbars. There may also be other solutions but one way is to reset the margin to 0 and apply padding instead. I’ve only reset h1 and p in my example because that’s all I’ve used.
h1, p {
margin: 0;
padding: 0.3em 0;
}
#container must have a min-height of 100%. Because IE6 doesn’t support min-height we have to have an IE fix using height instead. For other browsers, setting height instead of min-height will cause the container and footer to overlap.
The margin-bottom is the height + padding + border of #footer and is set to prevent overlapping between #container and #footer.
#container {
min-height: 100%;
margin-bottom: -36px;
}
* html #container {
height: 100%;
}
The last thing in the container needs to be a spacer which is set to the height of the #container margin-bottom setting, plus any additional space you want between the footer and the container.
#footer-spacer {
height: 36px;
}
And finally the footer itself. You have to specify a height for this to work so need to limit the amount of text going in the footer; any extra will disappear off the page. The border is not required; I’ve just used it in the example page to show where the footer is.
#footer {
border-top: 1px solid #000;
height: 35px;
}
Conclusion
So that’s all there is to it – it’s pretty easy to use and put your own content within the container area. In the coming weeks (HTML/CSS posts are made every Thursday) I’ll be looking at the following:
- 3 column layout with fixed columns, centered horizontally on the page
- 3 column layout with fixed left and right columns, and a min-width / max-width middle column
- 3 column layout with fixed left and right columns and the middle as wide as it can be i.e. a fully elastic layout that fills up the entire window width. This will be used for the new healthy.co.nz layout launching later this month
For each of these layouts I will also show how to apply this fixed footer.
Make sure you subscribe to my RSS feed (see below) so you don’t miss out on these.
