Hi folks,
I've got a CSS dilemma that has been bugging me for the last day, I'm trying to create a layout with a header at the top and the content at the bottom, expanding upwards.

Probably easier to explain with a picture... so here it is: http://tehjunk.com/layout.gif

The outline is the browser view, header is the header, footer is the footer which should be at the bottom of the browser view or the bottom of the content (whichever is lowest), the content should sit just above the footer and expand upwards to fit the content, if that's not enough it should push the footer down.

So far I've tried:

Code CSS:
html, body{
margin: 0;
padding: 0;
height: 100%;
}
 
#wrapper {
position:relative;
min-height: 100%;
width: 100%;
}
 
#header {
/* no positioning stuff in here */
}
 
#content {
padding-bottom: 100px; /*equal to the height of the footer */
}
 
#footer {
position:absolute;
bottom:0;
height:100px;
}

Code HTML4Strict:
<html>
<body>
<div id="wrapper">
<div id="header">header content here</div>
<div id="content">Content here</div>
<div id="footer">footer here</div>
</body>
</html>

This kind of works, in that the header is at the top, the footer is at the bottom of the viewport or content (whichever is further down), however the content sits just below the header, whereas I want it to sit just above the footer if it's short.

Any help appreciated. This could be done in tables quite easily, but I want to avoid that if possible.

Thanks