Group items tagged

Enforcing a minimum height for block elements in HTML is one of those few CSS tricks that you can't live without. There are still enough folks using IE6, unfortunately, and it doesn't support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser-conditional style sheets to get the desired effect.

/* STICKER - A valid, easy to use CSS sticky footer by Ryan Fait This is the basic CSS you need along with the one extra empty div and the wrapper required to achieve the effect. I suggest that you leave the * { margin: 0; } code in while testing and building your site because margins do have a tendency to mess things up a bit. Have fun! Copyright (c) 2006-2007 Ryan Fait */ * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */ } .footer, .push { height: 4em; /* .push must be the same height as .footer */ } /* TROUBLESHOOTING I've received a few comments about vertical margins causing a few problems with the layout. If you want space between paragraphs or headers, use padding instead of margin. It's as simple as that. */