OverviewProcessServicesWorkBlog
DP Blog
9. 5. 2008
Search
View Our Keyword Cloud
(aka Tag Cloud)
Recent Posts
Archives
Syndicate RSS Feed
[Valid RSS]

Sticky Footer Goodness

One problem I've run into many times now when setting up templates via css is the seemingly simple "sticky footer". Put simply, a sticky footer is designed to "stick" at the bottom of the browser even if your site does not fill the browser lengthwise. This required almost no thought with old school tables using height="100%" but with CSS we obviously try to avoid tables at all cost. And even if you still insist on peppering your markup with those dreaded tables, the table height attribute is no longer supported by newer browsers so you, my friend, are also out of luck.  Enter The Man in Blue, Cameron Adams. Using his sticky footer solution you can set up the web page to span the entire height of the browser by setting the html, body and site container's (excluding the footer) height to 100%. Then using relative positioning and negative margins the footer container is positioned to show at the bottom of the browser. You can view code examples in the original post. Hat's off to Cameron for a great solution!

Comments (0)

E-mail this Blog to a Friend! Leave a Comment
Your Name:
Your Email
Your Comments: