Advanced Search

Force footer to bottom of page

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

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.