klenwell information services : CssTricksCommon

Common CSS Techniques and Tricks

Useful rulesets that I find myself using now and again.

Recent Additions

This set of rules seems to do the trick for both IE and Firefox. Not extensively tested. Page would be the id for the outmost container. The footer clear block is necessary to make room for the footer block which, being positioned absolutely, is outside normal page flow. See html markup for basic layout.

css
/* footer: bottom viewport */
html, body { height: 100%; }
#page { position: relative; min-height: 100%; }
#footer { position:absolute; bottom: 4px; width:100%; }
.footer_clear { height:24px; }

html
<body>
<div id="page">

<!-- INSERT PAGE CONTENT -->

<div class="footer_clear"></div>
<div id="footer">
<!-- INSERT FOOTER CONTENT -->
</div>
</div>
</body>

reference: alistapart.com


CategoryCss