How to move that footer to the bottom
I’ve had this problem many times before. I want to put the footer at the bottom of the page. Even when there is little content, I don’t want it floating around somewhere. I want it to stick to the bottom edge of the browser.
So here’s a solution I’m using on this very blog. How does it work? First it makes sure that both body and html are of at least 100% height. Now by applying position:relative; to the body, we can absolutely position our footer inside of it. And make sure the body gets stretched when there is more content in it that fits the browser window. Using min-height:100%; does the trick in just about any browser but IE6 and older. But IE6 will resize the body so as to fit the content, even if it has a fixed height of 100%. But it will only do si in strict mode. This is achieved by specifying a doctype. So put a line like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
at the very start of your html document. No tags (not even < ?xml ... ?>) should come before the doctype.
This trick doesn’t work for IE5.5 and older (footer overflows the content), so we have to make sure we make a special rule for them to make it look at least a bit decent.
Footer demo - here is the demo. See the source for more info. It’s commented step by step so I think you should be able to understand what I did.
