≡ Menu

The “Shell Main Footer” CSS Hack

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;}


shell main footer div

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.

0 comments… add one

Leave a Comment