Wiki source for CssTricksCommon
=====Common CSS Techniques and Tricks=====
Useful rulesets that I find myself using now and again.
====Recent Additions====
===footer at bottom of viewport===
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**
%%(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**
%%(html)
<body>
<div id="page">
<!-- INSERT PAGE CONTENT -->
<div class="footer_clear"></div>
<div id="footer">
<!-- INSERT FOOTER CONTENT -->
</div>
</div>
</body>
%%
reference: [[http://alistapart.com/articles/footers/ alistapart.com]]
----
CategoryCss
Useful rulesets that I find myself using now and again.
====Recent Additions====
===footer at bottom of viewport===
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**
%%(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**
%%(html)
<body>
<div id="page">
<!-- INSERT PAGE CONTENT -->
<div class="footer_clear"></div>
<div id="footer">
<!-- INSERT FOOTER CONTENT -->
</div>
</div>
</body>
%%
reference: [[http://alistapart.com/articles/footers/ alistapart.com]]
----
CategoryCss
