Posted By

blueocto on 12/28/10


Tagged


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

maltem
TraceyM
yosuke


100% Height 3 column layout


 / Published in: XHTML
 

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

Report this snippet  

You need to login to post a comment.