Advanced Search

Full Width Header ~ fixed width content with sticky footer

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

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.