CSS Layout Problem

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Hi all,

I'm trying to create a normal layout. From top to bottom; the header,
the content then the footer (both the header and footer are fixed-
height - in pixels). What's different about this layout is that the
contents column will be fixed width (also centered) and has a solid
background color. So far so good, no problem, now the problem is that
I want the footer to be sticky (sticky, not fixed position), ie. if
the contents is shorter than the height of the browser window, the
footer will be pushed to the bottom of the browser window but if the
contents is longer it will be displayed normally under the contents
and will only be shown when scrolling to the bottom of the page.

Please see http://www.waleedeissa.com/temp/example.gifto understand
more what I'm trying to do.

How can this be achieved using css, I've been trying for hours but no
use. It's quite easy to achieve without the header but how can it be
done with the header?

For example, this how I would do it without the header:
<style type="text/css">
html, body
margin: 0px;
padding: 0px;
height: 100%;
height: 100%;
margin-bottom: -100px;
height: 100%;
width: 760px;
margin: 0px auto;
height: 100px;
<div id="container">
<div id="content"><div>
<div id="footer"><div>

Any help would be very much appreciated...

Site Timeline