sticky-footer

I have been trying various "sticky" footer solutions for the better part of three days with no success. I seek to place the footer at the bottom of the browser window in instances when not enough content is present to span the window's full height. Please. Help. Here's the basic site structure: <div id="siteWrapper"> <header> <div id="header"> <div id="headerWrapper"></div> </div> </header> <div id="content"> <div id="innerWrapper"> <div id="columnLeft"></div> <aside> <div id="aside"> <div id="asideWrapper"></div> </div> </aside> </div> </div> <footer> <div id="footer"> <div id="footerWrapper"

I need my footer to be fixed to the bottom of the page and to center it. The contents of the footer may change at all time so I can't just center it via margin-left: xxpx; margin-right: xxpx; The problem is that for some reason this doesn't work: #whatever { position: fixed; bottom: 0px; margin-right: auto; margin-left: auto; } I crawled the web and found nothing. I tried making a container div and nada. I tried other combinations and gurnisht. How can I make this happen? Thanks marcgg You should use a sticky footer solution such as this one : * { margin: 0; } html, body { height: 100%; }