Как footer заложить на низ?

var i=1; function addtext(el){a=el.parentNode;a.innerHTML=a.innerHTML+'<h1>'+(i++)+'</h1>test<br>test';}

html, body { height: 100%; margin: 0; padding: 0; } 
html>body #all { height: auto; min-height: 100%; } 
#all { height: 100%; width:972px; position: relative; color: #404040;margin:0 auto;} 
#empty, #footer { height: 32px; } 
#footer { bottom: 0; left: 0; margin-bottom:10px; position: absolute; width: 970px; display:block; background:url('/images/footer.gif');border:1px #376FA7 solid;} 
#main {padding-top:20px;} 
#content {padding-left:40px; width: 932px;border:1px #376FA7 solid;} 
body {background:#D1EAF4;font-size:12px;font-family: Arial;} 
h3{color: black;font-size:15px;font-family: Tahoma;margin:0;padding:5px;line-height:15px;}

<div id="all"> 
        <div id="main"> 
                <div id="content"> 
                <h3>Контент страницы</h3> 
                <br><input type="button" value="Добавить контента" onclick="addtext(this);"> 
                </div> 
        </div> 
        <br style="clear:both"> 
        <div id="empty">&nbsp;</div> 
        <div id="footer"> 
                <h3>Эта надпись снизу сколько бы контента не было на странице</h3> 
        </div>