Posted By

michellebracken on 09/14/11


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

catchatpas
spee66


Sticky Footer


 / Published in: CSS
 

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

Report this snippet  

You need to login to post a comment.