advanced code snippet search

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
 
Expand | Embed | Plain Text 
  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.