Posted By

hotdiggity on 03/30/09


Tagged

css html stickyfooter


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

indamix
AshMan
nirva


Sticky Footer


 / Published in: CSS
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Sticky Footer</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7.  
  8. /* commented backslash hack \*/
  9. html, body {
  10. height:100%;
  11. }
  12. /* end hack */
  13.  
  14. html,body {
  15. margin:0;
  16. padding:0
  17. }
  18.  
  19. #outer{
  20. min-height:100%;
  21. margin-bottom:-50px;
  22. height:auto;
  23. }
  24.  
  25. * html #outer {
  26. height:100%;
  27. }
  28.  
  29. #footer {
  30. width:100%;
  31. clear:both;
  32. height:50px;
  33. background-color: #FF8080;
  34. color: #000000;
  35. }
  36.  
  37. #clearfooter {
  38. clear:both;
  39. height:50px;
  40. }
  41.  
  42. div>p {
  43. margin:0
  44. }
  45.  
  46. html>body #minHeight {
  47. float:left;
  48. width:0px;
  49. height:100%;
  50. margin-bottom:-52px;
  51. } /*safari wrapper */
  52. </style>
  53. </head>
  54. <body>
  55. <div id="minHeight"></div><!-- Safari hack -->
  56. <div id="outer">
  57. <p>Content</p>
  58. <div id="clearfooter"></div>
  59. </div>
  60. <div id="footer">Footer</div>
  61. </body>
  62. </html>

Report this snippet  

You need to login to post a comment.