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.


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.