Posted By

kopeo on 08/17/10


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

mchadwick
jplr


Footer (bottom)


 / Published in: HTML
 

  1. <!-- The HTML -->
  2. <div id="container">
  3. <div id="header"></div>
  4. <div id="body"></div>
  5. <div id="footer"></div>
  6. </div>
  7.  
  8. <!-- The CSS -->
  9. html,body {
  10. margin:0;
  11. padding:0;
  12. height:100%;
  13. }
  14. #container {
  15. min-height:100%;
  16. position:relative;
  17. }
  18. #header {
  19. background:#ff0;
  20. padding:10px;
  21. }
  22. #body {
  23. padding:10px;
  24. padding-bottom:60px; /* Height of the footer */
  25. }
  26. #footer {
  27. position:absolute;
  28. bottom:0;
  29. width:100%;
  30. height:60px; /* Height of the footer */
  31. background:#6cf;
  32. }

Report this snippet  

You need to login to post a comment.