advanced code snippet search

Posted By

mcarneiro on 09/10/09


Tagged

structure


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

isocele
fbiz
tmbrenneke
wirenaught


Base CSS structure

 / Published in: CSS
 

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 
  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
Posted By: mcarneiro on August 5, 2010

changelog: removed windowWrapper causing scrolling bug on iphone (windowWrapper was usefull for position fixed effect on ie6 and creating layers over the site scroll... you can use-it fixing the css for iphone / ipad via user-agent)

Posted By: mcarneiro on November 18, 2011

changelog: removed css hacks for ie6 (considering it will use conditional comments or server side logic to insert browser class); fixed the overflow auto bug in html padding; also removed the text-align stuff

You need to login to post a comment.