コンテンツの高さが足らなくてもフッターを最下部の底辺に！

コンテンツの高さが足りないけど、フッターを最下部に固定したい！

<div id="container">
    <div id="header">ヘッダー</div>
    <div id="main">メインコンテンツ</div>
    <div id="footer">フッター</div>
</div>

/*----- 基本設定 -----*/
div#container{
    width: 850px;
    margin: 0 auto;
}
/*----- ここからが重要なフッター下部設定 -----*/
html,body{
    height: 100%;
}
div#container{
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
div#main{
    padding-bottom: 50px
}
div#footer{
    position: absolute
    bottom: 0
    width: 100%
    height: 50px
}

/*----- ここからが重要なフッター下部設定 -----*/
html,body{
    height: 100%;   /* ブラウザ画面の高さをめいっぱいに使用するよ */
                    /* こうしないと、htmlとbody要素は内包しているコンテンツの部分までしか高さが出ません*/
}
div#container{
    position: relative;      /* フッターを位置指定するための基準設定を、まずフッターの親に書くよ */
    min-height: 100%;        /* 全部囲ってるdiv#containerは、”最低でも”高さ100%（＝ブラウザ画面めいっぱい）にしてね */
                             /* min-heightは最低限の高さを指定するプロパティ。コンテンツ量が増えれば、高さは伸びるよ */
    height: auto !important; /* IE6じゃmin-height使えないからIE6専用にこの行と次の行をこう書くよ */
    height: 100%
}
div#main{
    padding-bottom:50px; /* 高さ50pxのフッターだから、その分空けてあげて */
}
div#footer{
    position: absolute;  /* フッターを絶対配置に指定する設定 */
    bottom: 0;           /* フッターを一番下に置くぜ！ */
    width: 100%
    height: 50px;        /* フッターの高さ */
}