Thursday, August 02, 2007

How to Position a DIV at the Bottom of the Page

Most web sites have a footer - a section at the bootom of every page that contains links, copyright, maybe the dat, and other info. In a tableless design, putting this footer at the bottom is not a problem if the content of the page is longer than the page itself, but what about when you have a short content page, like a contact form or something?

In such a case, if you're using a tabless design and positioning DIVs using CSS, the footer will ride up right under the short content instead of being at the bottom of the page.

On a new site I'm working on, I ran into this. Rather than resort to the old stanrd of using a three row table, I want to position my footer using CSS only.

You can read the full post by following the the link in this post's title, but here's the code to position a DIV at the bottom of a page, regardless of how long the page content is (I've checked it in IE 6 and FF 1.5).

The CSS styles:
html {height: 100%;}
body {height: 100%;}
#nonFooter {position: relative;min-height: 100%;}
* html #nonFooter {height: 100%;}
#footer {position: relative;margin-top: -7.5em;}
The HTML:
<html>
<body>
<div id="nonFooter">
main content
</div>
<div id="footer">
footer content
</div>
</body>
</html>