Full Width Header ~ fixed width content with sticky footer


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <title>Full Width Header ~ Fixed Width Content</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. /*------ Resets -----*/
  8. body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
  9. margin:0;
  10. padding:0;
  11. }
  12. body {
  13. background-color: #ccc;
  14. }
  15. html, body {
  16. height: 100%; /* for sticky footer */
  17. position:absolute;/* Opera height trigger*/
  18. width:100%;
  19. }
  20. #header {
  21. height: 115px;
  22. width:100%;
  23. min-width:962px;
  24. margin-bottom:-115px;
  25. background-color: #777;
  26. position:relative;
  27. }
  28. * html #header {
  29. width: 100%; /* Fallback width if javascript is off */
  30. width: expression(
  31. (document.documentElement.clientWidth < 964) ? "962px" : "auto");
  32. }
  33. #wrapper {
  34. min-height:100%; /* for sticky footer */
  35. width: 960px;
  36. background: white;
  37. margin:0 auto;
  38. border-left:2px solid #777; /*border width added to header and footer widths*/
  39. border-right:2px solid #777; /*border width added to header and footer widths*/
  40. }
  41. * html #wrapper {height:100%;} /*for ie6, same as min-height*/
  42.  
  43. #clearheader{height:115px; background:#ccc} /*clear header without margins or padding*/
  44.  
  45. #navbar {
  46. float:left;
  47. height: 50px;
  48. width: 765px;
  49. background-color:#A6A6A6;
  50. }
  51. #sidebar {
  52. float: right;
  53. width: 195px;
  54. background-color: #A6A6A6;
  55. }
  56. #content {
  57. background-color: #fff;
  58. width: 735px;
  59. float: left;
  60. }
  61. #clearfooter{clear:both; height:50px;} /*For a sticky footer*/
  62. #footer {
  63. width: 962px;
  64. background-color: #777;
  65. height:50px;
  66. margin:-50px auto 0 auto; /*pull footer back into viewport and center*/
  67. }
  68. h1,h2,h3,h4,h5 {padding-top:10px; text-align:center;}
  69. #navbar h4 {line-height:1.5em; padding:10px; text-align:left}
  70. #content h2 {text-align:left; padding: 10px;}
  71. #footer h4 {line-height:1.25em;}
  72. p {margin:10px;}
  73.  
  74.  
  75. </head>
  76.  
  77. <div id="header">
  78. <h2>Full Width Header ~ Fixed Width Content</h2>
  79. <h3>With a Sticky Footer</h3>
  80. </div><!-- end #header -->
  81.  
  82. <div id="wrapper">
  83. <div id="clearheader"></div>
  84. <div id="sidebar">
  85. <h4>Sidebar</h4>
  86. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  87. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
  88. lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
  89. adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
  90. sociis natoque penatibus et magnis dis parturient montes, nascetur
  91. ridiculus mus.</p>
  92. </div><!-- end #sidebar -->
  93. <div id="navbar">
  94. <h4>Navigation</h4>
  95. </div><!-- end #navbar -->
  96. <div id="content">
  97. <h2>Page Title</h2>
  98.  
  99. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  100. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
  101. lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
  102. adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
  103. sociis natoque penatibus et magnis dis parturient montes, nascetur
  104. ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
  105. consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
  106. natoque penatibus et magnis dis parturient montes, nascetur ridiculus
  107. mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
  108. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  109. Mauris vel magna.</p>
  110.  
  111. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  112. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
  113. lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
  114. adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
  115. sociis natoque penatibus et magnis dis parturient montes, nascetur
  116. ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
  117. consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
  118. natoque penatibus et magnis dis parturient montes, nascetur ridiculus
  119. mus. Donec semper ipsum et urna.</p>
  120.  
  121. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  122. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
  123. lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
  124. adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
  125. sociis natoque penatibus et magnis dis parturient montes, nascetur
  126. ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
  127. consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
  128. natoque penatibus et magnis dis parturient montes, nascetur ridiculus
  129. mus. Donec semper ipsum et urna.</p>
  130.  
  131. </div><!-- end content -->
  132. <div id="clearfooter"></div>
  133. </div> <!-- end wrapper -->
  134. <div id="footer"><h4>Footer</h4></div>
  135. </body>
  136. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.