HTML/CSS
Create a footer that sticks to the bottom of your browser without overlaping content.

Hide steps to view the example footer in action.

First you need to set the html and body of your page to 100% to communicate with the absolute position footer later.

(CSS)
html, body { padding-bottom:0; height:100%; }

Next you need to create a containing div outside all your content with the height of 100% so it reaches the bottom of your page. Also position relative so an absolute positioned element inside it will use this div as it's refrence point rather than the body.
I used a common method for accomplishing this in the CSS that is effective in ie6 as well.

HTML
<div id="container">all your content</div>
CSS
#container { min-height:100%; height:auto !important; height:100%; position:relative;}

Now we need to stop the footer from overlaping your content (because the absolute positioning will cause the footer to go over the bottom of your content. just make a div the height of the actual footer + whatever amount of space you want between the footer and content. I added clear both for good measure for any floating elements that may be in the content.

HTML
<div class="footer_clear">&nbsp;</div>
CSS
.footer_clear { height:50px; clear:both; font-size:1px; }

Now you simply create the footer div at the bottom of your page just before the closing of the "container" div and absolute position it to the bottom.

HTML
<div id="footer">footer content</div>
CSS
#footer { position:absolute; bottom:0; }

final code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sticky (content aware) footer</title>
<style type="text/css">
html, body { margin:0; height:100%; }
#container { min-height:100%; height:auto !important; height:100%; position:relative; }
#footer_clear { height:50px; clear:both; font-size:1px; }
#footer { position:absolute; bottom:0; width:100%; }
</style>
</head>
 
<body>
<div id="container">
Your Content
<div id="footer_clear">&nbsp;</div>
<div id="footer">Your Footer Content</div>
</div>
</body>
</html>