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.

  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.