Advanced Search

Footer at bottom

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <div id="container">
  2.    <div id="header"></div>
  3.    <div id="body"></div>
  4.    <div id="footer"></div>
  5. </div>
  6.  
  7. =========================================================================
  8.  
  9. html, body 
  10. {
  11.    margin:0;
  12.    padding:0;
  13.    height:100%;
  14. }
  15.  
  16. #container 
  17. {
  18.    min-height:100%;
  19.    position:relative;
  20. }
  21.  
  22. #header 
  23. {
  24.    background:#ff0;
  25.    padding:10px;
  26. }
  27.  
  28. #body 
  29. {
  30.    padding:10px;
  31.    padding-bottom:60px;   /* Height of the footer */
  32. }
  33.  
  34. #footer 
  35. {
  36.    position:absolute;
  37.    bottom:0;
  38.    width:100%;
  39.    height:60px;   /* Height of the footer */
  40.    background:#6cf;
  41. }
  42.  
  43. And one simple CSS rule for IE 6 and 5.5: !!! conditioneel
  44.  
  45. #container 
  46. {
  47.    height:100%;
  48. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.