CSS Sticky Footer - Never works right for me

I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.

Here's my HTML:

<html>
    <body>
        <div id='container'>
            <div id='main'>
                <div id='content'> </div>
            </div>
            <div id='footer'> </div>
        </div>
     </body>
</html>

And here would be my basic CSS, without implementation of CSS Sticky Footer:

div#container {
    width:960px;
    margin:0 auto;
}
div#main {
    background-color:black
    padding-bottom:30px;
}

div#content {
    width:425px;
}

div#footer {
    position:relative;
    bottom:0;
    width:inherit;
    height:90px;
}

To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?

And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead

Solution

Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

EDIT

Using the technique in the article above (tested - and works in fiddle):

HTML

<html>
    <head>
    </head>
    <body>
    <div id='container'>
        <div id='main'>
            <div id='content'>Hello</div>
        </div>
        <div id='footer'> </div>
    </div>
    </body>
</html>

CSS

html, body {
    margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
    background-color: #333;
}
div#container {
    min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
    padding-bottom:90px; margin:0; padding:10px;
        }
div#content {
    width:425px;
}
div#footer {
    position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}