Keeping the footer at the bottom of the page isn’t hard to do. The way I will show you will also keep a min-height so that if the browser gets too small, the footer won’t run into any of the page’s content.

CSS:

html,body {
	margin:0;
	padding:0;
	height:100%;
}
#container {
	min-height:100%;
	position:relative;
}
#header {
	background:#000;
	padding:10px;
}
#content {
	padding:10px;
	padding-bottom:500px;
}
#footer {
	position:absolute;
	bottom:0;
	width:100%;
	height:60px;
	background:#000;
}

Explanation:

For “container” I set a min-height of 100%. This is necessary for “footer” to remain at the bottom.

To get this working on IE, you can create do one of two things. You can add the following to the previous stylesheet:

*html #container {
	height:100%;
}

Or you can create another stylesheet and do the IE conditional to include this new stylesheet. In this stylesheet put

#container {
	height:100%;
}

Either way, this lets IE know to keep the height.

For “content,” a padding-bottom of 500px is placed to force the footer to stay at least 500px down on the window.

Finally, “footer” is absolutely positioned to the bottom of “container” with a width of 100%.

HTML:

<div id="container">
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
</div>

That should do it.

Result:

Here is what the final result looks like.