Posicionando um rodapé na parte inferior

O objetivo é ter um rodapé colado na parte inferior do navegador (fazendo com que o site se estenda até a parte inferior) ou, se não houver espaço livre, cole no final do site.

<div id="wrapper">
    <div id="container">
        your content

        <div id="footer">
            your footer
        </div>
    </div>
</div>

O CSS:

html {
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #999;
}

#wrapper {
    width: 900px;
    margin: auto;
    background-color:#fff;
    height: auto !important;
    margin: auto;
    min-height: 100%;
    overflow: hidden;
    position: relative;
}

#container {
    height: 100%;
    min-height: 100%;
    width: 900px;
    margin:auto;
    padding-bottom: 80px;
}

#footer {
    width: 900px;
    height: 80px;
    position: absolute;
    bottom: 0;
    color: #eee;
    background-color:#333;
}