advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

daeliur on 07/10/07


Tagged

css layout footer


Versions (?)


Who likes this?

6 people have marked this snippet as a favorite

basicmagic
marteki
stoker
stavelin
rouxmout
esquareda


STICKER - A valid, easy to use CSS sticky footer

Published in: CSS 

URL: http://ryanfait.com/sticky-footer/

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

/*

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.

*/

Plain TextExpand 
  1. * {
  2. 	margin: 0;
  3. }
  4. html, body {
  5. 	height: 100%;
  6. }
  7. .wrapper {
  8. 	min-height: 100%;
  9. 	height: auto !important;
  10. 	height: 100%;
  11. 	margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
  12. }
  13. .footer, .push {
  14. 	height: 4em; /* .push must be the same height as .footer */
  15. }

Report this snippet 

You need to login to post a comment.