k, had free time, and i made a paul/maleika mix result, featuring the best of both solutions

Code CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
    margin:0;
    padding:0
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
}
#outer {
    width:760px;
    background:#ffffcc;
    margin:auto;
    min-height:100%;
    margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
}
/* #inner protects any floats in the content from clearing the minheight float */
#inner {
    width:760px;
    overflow:hidden;/* you could use float:left if you wanted content to overflow*/
    /* background:#ffffcc; If floated instead of overflow:hidden then repeat #outer background color here */
}
#header {
    background:red;
    border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#footer {/* footer now sits at bottom of window*/
    background:red;
    width:760px;
    margin:auto;
    height:40px;/* must match negative margin of #outer */
    clear:both;
}
 
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
}
/*Opera Fix*/
/*IE8 Fix*/
#outer:after {
	content:"";
	float:left;
    width:0;
    height:100%;
    overflow:hidden;/* just in case*/
}
/*IE8 Fix*/
 
</style>
<!--[if lt IE 8]>
<style type="text/css">
* html #outer {height:100%}/* ie6 needs this*/
.minheight{display:none}/* ie6 and 7 don't need this */
</style>
<![endif]-->
</head>
<body>
 
<div id="outer">
    <div id="inner">
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
</div>
<div id="footer">Footer</div>
</body>
</html>