Why do you sit there looking like an envelope without any address on it? (Got that from Mark Twain.)
A tricky CSS hack for aligning a Web page’s footer to the bottom of a browser window no matter how much content is in on the page.
The stylesheet:
html{ height:100%;}
body{ height:100%;}
div#shell {position:relative; height: 100%; min-height: 100%;}
body>div#shell {height:auto;}
div#main{padding-bottom:80px; position:relative;}
#footer {width:100%; position:absolute; bottom:0px;}
The HTML:
Note the greater than sign (>) on fifth line in the stylesheet:
body>div#shell {height:auto;}
The point of this is to keep the height:auto behaving as if it were applied to an unnested shell div regardless of where the div is in the HTML. If, in the HTML, the shell div is nested in a parent div, then the height:auto wouldn’t apply.
Without replacing the usual space with this greater than sign, such as:
body div#shell {height:auto;}
…you’ll risk running into layout problems. The height:auto could be illogical should you happen to nest the shell in another div.
