Web Standardistas - HTML and CSS Web Standards Solutions

Notes

Sticky Footer

Duct tape for illustrative purposes only.

There are a number of things that appear to be really, really hard to do really, really easily in CSS. One of these is creating a layout where a footer remains firmly fixed to the bottom of a browser window regardless of the amount of content on a page.

Getting a footer to stick to the bottom of a page has long been a Class A CSS Conundrum. The doctor usually recommends additional content - pages with scrollbars, after all, are never plagued by this particular problem – but there are many occasions where this is not a viable option.

Enter CSS Sticky Footer.

With no need for duct tape, this single-serving site offers a (relatively) simple way to ensure your footer sticks. The only caveat: you can’t use vertical margins on elements with a declared height (however, as most cases allow you to use padding as an alternative to vertical margins, this issue is relatively minor).

CSS Sticky Footer is well worth a bookmark, some day you’ll probably need it.

1243567140 · Nicklas Persson · Follow Us on Twitter

@standardistas: Check out Pears, a delightful, expandable, open-source pattern library from @simplebits: http://t.co/9ymlx27m