Footer always bottom

HTML:

    <div id="container">
        <div id="main">
            <div id="header">
                <h2>
                    header
                </h2>
            </div>
            <div id="content">
                <h2>
                    content content content content<br />
                    content content content content<br />
                    content content content content<br />
                    content content content content<br />
                </h2>
            </div>
        </div>
    </div>
    <div id="footer">
        <h2>
            footer
        </h2>
    </div>

CSS:

*{padding:0; margin:0;}
html {height: 100%;}
body {height: 100%;}
#container {min-height: 100%;}
* html #container {height: 100%;}
#header {height: 110px;}
#footer {height: 90px;position: relative;margin-top:-90px;}
#main {min-height: 100%;}
* html #main{height: 100%;}
#content {padding-bottom: 90px;}

#header{background:red;}
#container {background:#aaa;}
#content{background:green;}
#footer{background:blue;}