Advanced Search

Footer (bottom)

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

Expand | Embed | Plain Text

Copy this code and paste it in your 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. <style>
  10. 	html,body {
  11. 	   margin:0;
  12. 	   padding:0;
  13. 	   height:100%;
  14. 	}
  15. 	#container {
  16. 	   min-height:100%;
  17. 	   position:relative;
  18. 	}
  19. 	#header {
  20. 	   background:#ff0;
  21. 	   padding:10px;
  22. 	}
  23. 	#body {
  24. 	   padding:10px;
  25. 	   padding-bottom:60px;   /* Height of the footer */
  26. 	}
  27. 	#footer {
  28. 	   position:absolute;
  29. 	   bottom:0;
  30. 	   width:100%;
  31. 	   height:60px;   /* Height of the footer */
  32. 	   background:#6cf;
  33. 	}	
  34. </style>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.