Advanced Search

100% Height 3 column layout

/ Published in: XHTML
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.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. * {margin:0px; padding:0px;}
  8. body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em}
  9. #container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;}
  10. #header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;}
  11. #header h1{color:#fff; text-align:left;}
  12. #leftcol{width:240px; float:left; background:#f6d4d4; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; }
  13. #midcol{width:360px; float:left; background:#a3f9d8; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; text-align:left;}
  14. #midcol p{margin-bottom:10px;}
  15. #rightcol{ width:240px; float:left; background:#fa0; padding: 10px 5px; overflow:hidden; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px;}
  16. #footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;}
  17. </style>
  18. </head>
  19.  
  20. <body>
  21.  
  22. <div id="container">
  23.   <div id="header"><h1>This is the Header</h1></div>
  24.  
  25.   <!-- START LEFT COLUMN -->
  26.   <div id="leftcol">
  27.   	<h2>The left column</h2>
  28.     <p>And the text for the left column</p>
  29.   </div>
  30.  
  31.   <!-- START CENTER COLUMN -->
  32.   <div id="midcol">
  33.   	<h2>The middle column</h2>
  34.     <p>And some text for the center column</p>
  35.   </div>
  36.  
  37.   <!-- START RIGHT COLUMN -->
  38.   <div id="rightcol">
  39.     <h2>The right column</h2>
  40.     <p>And then again, some text for the right column</p><p>And then again, some text for the right column</p>
  41.     <p>And then again, some text for the right column</p><p>And then again, some text for the right column</p>
  42.   </div>
  43.  
  44.   <hr style="display:block; height:0.1em; clear:both; visibility:hidden;" />
  45.   <div id="footer">Footer</div>
  46. </div>
  47.  
  48. </body>
  49. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.