So here’s the scenario: You’ve created a flash-based website or your XHTML Strict website content is only 500px tall and the visible browsing area you’re designing for varies from being 600px to 1000px high. I’ve been getting a lot of request’s about how to position footer content so that its always on the bottom of your webpage when your content is too short to reach the bottom of the page.

If your html and css looks like the following:

Current HTML Code:

<div id="footer">
Your Copyright Info Here, Links, etc.
</div>

Current CSS Styles:

div#footer {
clear:both;
text-align:center;
}

To position your footer div so that it is always on the bottom of your web page no matter how short your content above the div is, you need to make the following changes to your css:

1. First, set your html’s & body’s height and with to 100%. You must specify min-height at 100% because some browsers like IE still dont get what height:100% means. I typically center all my sites so, I’ve added text-align to center on my body tag.

html {
height: 100%;
min-height: 100%;
widith: 100%;
}

body {
height: 100%; 
min-height: 100%;
width: 100%;
text-align: center;
}

This pushes the “walls” surrounding your containing div to its highest and lowest possible points on the browser.

2. Second, modify your footer div to have the following:

div#footer {
height: 100%;
min-height: 100%;
width: 100%;
position: absolute;
bottom: 0;
padding-bottom: 2%;
left: 0;
}

The only way the footer is going to stay at the bottom of the browser is by setting the height to 100% because it won’t be pushed to the very bottom. The next thing you do is set the position to absolute so you can control its position using the bottom attribute; setting this to zero positions it at the very bottom. Add some padding if you like and then the last bit is setting the left position to zero as well. This ensures that your footer div doesnt get pushed around to the left or to the right by any other elements. Dont’ worry about the centering part, the text-align center attributes we set in the body tag will do this for us.

That’s it, if you have any questions or need a hand, let me know in your comments below.