Advanced Search

Base CSS structure

/ Published in: CSS
Save to your folder(s)
css structure with \"sticky footer\", tested on Internet Explorer 6+, Firefox 3+, Google Chrome 2+, Safari 4+, now for iphone and ipad (fixed bug with page scroll).\r\nRemember to use a reset.css: the margin / padding of html and body must be zero.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. html{ overflow-x:auto; }
  2. html, body{
  3. 	height:100%;
  4. }
  5.  
  6. /* site width */
  7. .header-holder,
  8. .body-holder,
  9. .footer-holder{
  10. 	width:900px;
  11. 	margin:0 auto;
  12. }
  13.  
  14. .main-wrapper{
  15. 	min-height:100%;
  16. 	position:relative;
  17. 	z-index:1;
  18. }
  19. .ie6 .main-wrapper{
  20. 	height:100%;
  21. }
  22. 	.header-wrapper{
  23. 		background:#E9EBB5;
  24. 	}
  25. 		.header-holder{
  26. 			background:#D5D7A4;
  27. 		}
  28. 	.body-wrapper{
  29. 		background:#BAE1FF;
  30. 		padding-bottom:100px;
  31. 	}
  32. 		.body-holder{
  33. 			background:#A8CCE9;
  34. 		}
  35. .footer-wrapper{
  36. 	position:relative;
  37. 	z-index:2;
  38. 	background:#FFF799;
  39. 	margin-top:-80px;
  40. 	min-height:80px;
  41. }
  42. .ie6 .footer-wrapper{
  43. 	height:80px;
  44. }
  45. 	.footer-holder{
  46. 		background:#ECE48C;
  47. 	}
  48.  
  49. html{
  50. 	padding-top:100px;
  51. }
  52. /*
  53. <!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
  54. <!--[if gt IE 7 ]> <body> <![endif]-->
  55. <!--[if !IE]><!--> <body> <!--<![endif]-->
  56. 	<div class="main-wrapper">
  57. 		<div class="header-wrapper">
  58. 			<div class="header-holder">
  59. 				header
  60. 			</div>
  61. 		</div>
  62. 		<div class="body-wrapper">
  63. 			<div class="body-holder">
  64. 				<? for($i=0;$i<100;$i++){?>
  65. 				body<br />
  66. 				<?}?>
  67. 			</div>
  68. 		</div>
  69. 	</div>
  70. 	<div class="footer-wrapper">
  71. 		<div class="footer-holder">
  72. 			footer
  73. 		</div>
  74. 	</div>
  75. </body>
  76. */

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.