Three Column fixed with layout with CSS


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



Copy this code and paste it in your HTML
  1. <div id="main_wrapper">
  2. <div id="header">
  3. <div id="header_inner">
  4. <a href="index.php?src"><h1>Company Name</h1></a>
  5. </div><!-- end header_inner -->
  6. </div><!-- end header -->
  7. <div id="nav">
  8. <div id="nav_inner">
  9. <ul>
  10. <li><a href="#">Nav item 1</a></li>
  11. <li><a href="#">Nav item 2</a></li>
  12. </ul>
  13. </div><!-- end nav_inner -->
  14. </div><!-- end nav -->
  15. <div id="content">
  16. <div id="content_inner">
  17. [[Content]]
  18. </div><!-- end content_inner -->
  19. </div><!-- end content -->
  20. <div id="promo">
  21. <div id="promo_inner">
  22. </div><!-- end promo inner -->
  23. </div><!-- end promo -->
  24. <div id="footer">
  25. <div id="footer_inner">
  26. [[layout.webpage_footer]]
  27. </div><!-- end footer_inner -->
  28. </div><!-- end footer -->
  29. </div><!--end main wrapper-->
  30.  
  31. /*CSS*/
  32. body { text-align: center; }
  33. #page { background:#fff; }
  34. #main_wrapper { width: 960px; margin-left: auto; margin-right: auto; text-align: left; }
  35.  
  36. #header { height: 76px; background: transparent url(graphics/logo.jpg) no-repeat top left; }
  37. #header a { width: 768px; height: 76px; display: block; }
  38. #header h1 { display: none; }
  39. #header_inner { }
  40.  
  41. #nav { width: 18%; float: left; }
  42. #nav_inner { padding:1em 1.2em; border-right:3px solid #666; }
  43.  
  44. #content { width: 60%; float: left; top: 0px; }
  45. #content h1, #content a { color: #437fb1; }
  46. #content_inner { padding:2em 6em 1em 3.5em; }
  47.  
  48. #promo { width: 22%; float: left; }
  49.  
  50. #footer { clear:both; }
  51. #footer_inner { padding:.5em 1em; }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.