Sometimes it’s the simple things that can be the most infuriating when it comes to dealing with CSS. Positioning a footer to stay at the bottom of the browser window unless the content is larger, sounds like it should be fairly simple, but is in fact quite an advanced technique when it comes to CSS.
However, the following tutorial will explain in a few simple steps, how this can be achieved very easily.
First up, here’s a demonstration of the kind of thing you’ll be able to achieve with this technique:
HTML
I’m going to start off with the code that I used within the 100% Height Layout Using CSS tutorial as this provides the foundations we need for this page.
The only extra bit of code that I’ve added to the previous tutorial is the clearfooter div and the footer div.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>CSS Fixed Footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="container">
<h1>CSS Fixed Footer</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>
<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue.</p>
<div id="clearfooter"></div>
</div>
<div id="footer">
<p>© Dave Woods</p>
</div>
</body>
</html>
CSS
Again, I’ll be using the same CSS as that used within the 100% height tutorial as a starting point. If you’re unsure of what the following block of CSS is doing, please refer to that tutorial.
* {
padding: 0;
margin: 0;
}
body {
font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
h1 {
font-size: 1.4em;
padding: 10px 10px 0;
}
p {
padding: 0 10px 1em;
}
html, body {
height: 100%;
}
#container {
min-height: 100%;
background-color: #DDD;
border-left: 2px solid #666;
border-right: 2px solid #666;
width: 676px;
margin: 0 auto;
}
* html #container {
height: 100%;
}
Ok, so now you want to know how to place the footer underneath the content don’t you. Well here it is…
#footer {
width: 680px;
background-color: #000;
color: #DDD;
text-align: center;
height: 40px;
padding-top: 10px;
margin: -50px auto 0 auto;
}
Most of this is pretty straight forward. The width, background color, text color, text align, height and padding-top are all used just to style the footer but the really clever part comes with the use of margins.
Without the margin, the footer will always appear after the content and will therefore cause 50px worth of scroll (40px height + 10px padding) and will always appear outside the view port due to the use of 100% height. However, we know the height of the footer so this can be corrected by pulling the footer back in to view by using a negative margin that is equal to the height of the footer.
We could leave this as it is, but you’ll also notice that currently if the browser window is reduced to a smaller size than the content that the content will go underneath the footer.
To correct this problem we can apply the following style to the clearfooter div to ensure that there’s always enough height at the end of the content to cater for the height of the footer.
#clearfooter {
height: 50px;
}
We could apply this style to an existing element or simply apply an ID to an existing element and use padding or margin on the bottom of that element to create the space but where that’s not a possibility then using an extra div is the most suitable solution.
As always, please feel free to comment or ask any questions about using this technique using the comments section below.
Vincent
2 years ago
Interesting article. Seems like the right and also an easy way to organize the footer with CSS.
Furthermore, I immediately think back at my background problem (stretching both vertically as horizontally 100%). Looks like their should be a way to achieve this with negative margins. As the size of the scrolling area is equal to my heading divisions.
jonnyk
2 years ago
I’ve been solving the same problem… slightly different solution though. you’ll have to excuse the mess, i’m still putting the final touches to my blog design but thought you may be intersted anyway…
http://blog.10secondtourism.com/2008/01/24/css-magic-footer/
10secondtourism | » Blog Archive » css smart footercode and design for websites
2 years ago
[...] 02/02/08 alternate solution at dave-woods.co.uk search [...]
Jermayn Parker
2 years ago
Best article on this subject I have seen especially seeing it does not use too much extra code and JavaScript!
Thanks and bookmarked!
Thryn
2 years ago
I agree, this is the best solution to this problem that I’ve seen so far. I was wondering if you have any insight into a problem I haven’t been able to solve involving footers, with any of the various css solutions I’ve tried.
The footer positioning works perfectly, and container stretches to 100%. But if the layout requires me to have a div within container, that I also need to stretch to 100% height it doesn’t stretch, even if all of the elements it’s contained within have a height of 100%. Do you have any ideas about why it may not work as expected? Thanks for your great work!
Ville
2 years ago
I tried this one, but I there is a problem, if you want to have some text content available in the footer (links, mailto etc) they will not be active because the #clearfooter overlaps the footer.
It can be solved by using /height: auto;/ in #container
» CSS Tutorials — cne _LOG Archiv
2 years ago
[...] Dave Woods: CSS Fixed Footer [...]
john
2 years ago
I have a simple navigation table at the foot of all my pages,(except the front page)which I have to change every time, on every page.
How do I include this table in an external style sheet to be the footer for every page?
I am new to CSS styles so sorry if this sounds a stupid question.
Dave
2 years ago
Hi John,
CSS is only for presentation so you’ll need to use another method for what you’re describing.
I’d recommend using SSI (Service Side Includes)
http://en.wikipedia.org/wiki/Server_Side_Includes
You’ll need to ensure your server is capable of this and save your page with a server side extension (I usually use .php but .asp, .shtml should work just as well).
Hope that helps?
George
2 years ago
Hi Dave,
Thanks for your site! I’m in the process of converting my 10 year old site so I’m learning all the new CSS stuff and getting away from the table layouts. The “100% Height Layout Using CSS” worked great. I tried to use this tutorial – the fixed footer. It works with a text footer, but when I tried to put a background graphic as part of the footer div, it doesn’t work. Is there a solution to this? Thanks.
George
Richard Hall
2 years ago
I was trying to replicate this page with a 5% footer. But when I reduce the height of the viewport the footer no longer sits at the bottom of the viewport.
All I changed was
#footer {
width: 680px;
clear: both;
height: 5%;
background-color: #000;
color: #DDD;
text-align:center;
margin: -5% auto 0 auto;
position: relative;
/* padding-top: 1%; */
}
#clearfooter {
display: block;
height: 5%;
}
Amer
2 years ago
hey,
there is missing in your HTML.
it is confusing everything with the .net
doesnt work..
thanks.
the vitamin k blog » Blog Archive » css smart footer
1 year ago
[...] edit 02/02/08 alternate solution at dave-woods.co.uk [...]
Preevacycle
1 year ago
Hi! hgh spray hgh spray
Cebadilla
1 year ago
Thank!
After so much searching, the only footer that really works is yours!!
Anthony
1 year ago
Thank you very much, I’ve been trying to figure out how to do this for a long time.
Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know
1 year ago
[...] CSS Fixed Footer [...]
Greg
1 year ago
Dave, thank you so much for posting this!! Getting footers to behave like this has been a tough challenge. After including a few content divs, I just have one problem (if you have a chance to look at it). Please check it out the thread I posted for all the juicy details. Thank you!
http://www.webdeveloper.com/forum/showthread.php?t=203801
Paul
1 year ago
I got a problem with compatibile on IE 6 … looks like clearfooter makes width and margin does not apply or something footer is lower then supposed to be against the content.
maybe is not a big deal in your case (example) but i am trying to apply this to 200 width footer ….
BTW great article … bookmarked!
does anyone have a solution to sort this out?
Paul
1 year ago
I guess its becasue IE 6 might not accept “minus” values on footer margin or something like that…
for me ‘compatibility and usability’ is top prior.. and I really need to make it working for this browser … ;/
if anyone could help … ?
Greg
1 year ago
Thanks to a kind member of the WebDeveloper.com forum, a solution was posted for my problem. All is well again in my twisted little world!
Lucy
1 year ago
I have been trying hard to replicate this with a webpage I am trying to build but I cant get anywhere with it!
Could you perhaps explain it a little more, or in a different way please?
Thanks,
Lucy
Dave
1 year ago
Hi Lucy, If you have a look at the following page you’ll see how it works
http://www.dave-woods.co.uk/wp-content/uploads/2008/02/css-fixed-footer.html
Lucy
1 year ago
Ive looked at that but I cant belnd your code into the webpage which I have already created. Any ideas how I can?
Thanks,
Lucy
Dave
1 year ago
If you just view the source code of that page then all the HTML and CSS is there for you
Lucy
1 year ago
il give it a bash. thanks for the code
Dean
1 year ago
I’m currently reworking a website, and I’m using this solution which works great on most pages – however, one page I have created has left the footer in a dates field. I’m not sure where I’ve gone wrong.
HTML
title
body {
background: url(../images/backgroundbio.gif) no-repeat center 330px
}
#bio-dates, #bio-dates2, #bio-dates3, #bio-award-dates, #bio-award-dates2, #bio-exhibit-dates, #bio-exhibit-dates2, #bio-exhibit-dates3, #bio-exhibit-dates4, #bio-exhibit-dates5, #bio-exhibit-dates6, #bio-exhibit-dates7, #bio-exhibit-dates8 {
float:left;
line-height: 1.1em;
margin-left: 2em;
font-family: “Orator Std”, “Courier New”, Arial;
color: #666;
}
#bio-info, #bio-info2, #bio-info3, #bio-award-info, #bio-award-info2, #bio-exhibit-info, #bio-exhibit-info2, #bio-exhibit-info3, #bio-exhibit-info4, #bio-exhibit-info5, #bio-exhibit-info6, #bio-exhibit-info7, #bio-exhibit-info8 {
float:right;
text-align:left;
width:45em;
line-height: 1.1em;
font-family: “Orator Std”, “Courier New”, Arial;
color: #666;
}
.bottom {
padding-bottom: 3em;
}
Laura Jayne Strand
Biography
text
Education
dates
info
dates
info
dates
info
Awards
dates
info
dates
info
Exhibitions
dates
info
dates
info
dates
info
dates
info
dates
info
dates
info
dates
info
dates
info
© 2009 myname
CSS
===
#container {
min-height: 100%;
width: 780px;
margin: 0 auto;
}
* {
padding: 0;
margin: 0;
}
body {
font-family: “Orator Std”, “Courier New”, Arial;
font-size: 0.9em;
color: 666666;
}
html, body {
height: 100%;
}
* html #container {
height: 100%;
}
p {
padding-top: 0;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em;
color: #666666;
font-size: 1em;
}
#clear {
clear: both;
}
.text {
font-family: “Orator Std”, “Courier New”, Arial;
text-align: justify;
margin-right: 1em;
margin-left: 1em;
line-height: 1.1em;
color: #666666;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li ul {
display: none;
position: static;
}
li:hover ul, li.over ul{ display: block; }
h1 {
font-size: 4.5em;
font-family: “Orator Std”, “Courier New”, Arial;
text-align: center;
padding-top: 0.5em;
padding-right: 0em;
padding-bottom: 0.7em;
padding-left: 0px;
font-weight: normal;
font-variant: small-caps;
color: #666666;
}
h2 {
font-size: 2.5em;
color: #666;
font-family: “Orator Std”, “Courier New”, Arial;
font-weight: normal;
text-align: center;
padding-bottom: 1em;
font-variant: small-caps;
}
h3 {
font-family: “Orator Std”, “Courier New”, Arial;
font-size: 1.5em;
font-weight: normal;
font-variant: small-caps;
text-align: center;
color: #666666;
padding-bottom: 0.5em;
padding-top: 0.5em;
}
#footer {
width: 780px;
color: #CCC;
text-align: right;
height: 30px;
padding-top: 10px;
margin: -50px auto 0 auto;
font-size: 0.8em;
}
===========
any ideas?
Dean
1 year ago
ugh, that didn’t come out great!
where it says dates or info, its just an editable region.
Theres a div id=”clear” below each date/info field
Dean
1 year ago
ahhh, please ignore. I fixed the problem by simply making the container 120% for the individual page causing the problem. I’m not sure if that is the best solution or not, so if you would have done something differently then I’m all ears!
Winter
1 year ago
За статью спасибо вам огромное, все по делу, достаточно много кто это применяет на практике
Tinker
1 year ago
This fails, as they all fail, if the container has two columns, one floating left, the other floating right. Any time the right column exceeds the height of the lewt column, the footer does not re-position at the bottom, but over-writes the column.
There is no simple way to do this, Dave, but this is a very nice try…
CSS | Tutorials, Techniques, Hacks, & Resources - MLC#4 | The Blog of Joren Rapini
1 year ago
[...] Dave Woods – Freelance Web Designer UK » CSS Fixed Footer – absolute, bottom, css, fixed, footer [...]
Jim Brothers
11 months ago
In all of my searches for a css footer solution, yours uses the least amount of code, and works great! Thanks!
Lasse Beckman
9 months ago
And for you out there use ASP.NET with the extra tag. Change this to make this code work in all browsers.
Code in this exampel:
html, body {
height: 100%;
}
Change to this:
html, body, form {
height: 100%;
}
That’s all.
Lasse Beckman
9 months ago
My form tag was removed. A new try:
And for you out there use ASP.NET with the extra form tag.
Kurt
6 months ago
Thanks for the tip.
Elmer Jimenez
3 months ago
Is there any way to try this technique (which by the way works wonderfully), but also using a banner div? In other words, have a banner DIV that behaves much like the footer and still have the middle content div, also stretching 100% height-wise?
Dave Woods
3 months ago
@Elmer, yeah that should be possible, think I’ll need to write another article for that though