Posted By

daveonkels on 01/02/10


Tagged

basic


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

wirenaught


Sticky Footer


 / Published in: CSS
 

  1. <div id="wrap">
  2. <div id="main" class="clearfix">
  3. </div>
  4. </div>
  5. <div id="footer">
  6. </div>
  7.  
  8. * { margin:0; padding:0; }
  9.  
  10. html, body, #wrap { height: 100%; }
  11.  
  12. body > #wrap {height: auto; min-height: 100%;}
  13.  
  14. #main { padding-bottom: 150px; } /* must be same height as the footer */
  15.  
  16. #footer {
  17. position: relative;
  18. margin-top: -150px; /* negative value of footer height */
  19. height: 150px;
  20. clear:both;}
  21.  
  22. /* CLEAR FIX*/
  23. .clearfix:after {content: ".";
  24. display: block;
  25. height: 0;
  26. clear: both;
  27. visibility: hidden;}
  28. .clearfix {display: inline-block;}
  29. /* Hides from IE-mac */
  30. * html .clearfix { height: 1%;}
  31. .clearfix {display: block;}
  32. /* End hide from IE-mac */

Report this snippet  

You need to login to post a comment.