Force footer to bottom of page


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



Copy this code and paste it in your HTML
  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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <style type="text/css">
  6. /* commented backslash hack v2 \*/
  7. html, body{height:100%;}
  8. /* end hack */
  9. *{margin:0;padding:0}
  10. body {
  11. padding:0;
  12. margin:0;
  13. background:pink;
  14. color: #000000;
  15. }
  16. #outer{
  17. min-height:100%;
  18. background:#F8E7EC;
  19. margin-bottom:-52px;
  20. color: #000000;
  21. }
  22.  
  23. * html #outer{height:100%} /*for IE as IE treats height as min-height anyway*/
  24. #footer {
  25. width:100%;
  26. clear:both;
  27. height:50px;
  28. border-top:1px solid #000;
  29. border-bottom:1px solid #000;
  30. background-color: #FF8080;
  31. color: #000000;
  32. text-align:center;
  33. position:relative;
  34. }
  35. * html #footer {/*only ie gets this style*/
  36. \height:52px;/* for ie5 */
  37. he\ight:50px;/* for ie6 */
  38. }
  39. html > body #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper */
  40. </style>
  41. </head>
  42. <body>
  43. <div id="minHeight"></div>
  44. <div id="outer">
  45. <p>This is some content : This is some content : This is some content : This
  46. is some content : This is some content : This is some content : This is some
  47. content : This is some content : This is some content : This is some content
  48. : This is some content : This is some content : This is some content : This
  49. is some content : This is some content : This is some content : This is some
  50. content : This is some content : This is some content : This is some content
  51. : This is some content : This is some content : This is some content : This
  52. is some content : This is some content : This is some content : This is some
  53. content : This is some content : This is some content : This is some content
  54. : This is some content :
  55. </p>
  56. <div id="clearfooter"></div>
  57. <!-- to clear footer -->
  58. </div>
  59. <!-- end outer div -->
  60. <div id="footer">Footer - | | - Footer </div>
  61. </body>
  62. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.