Two 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="footer">
  21. <div id="footer_inner">
  22. [[layout.webpage_footer]]
  23. </div><!-- end footer_inner -->
  24. </div><!-- end footer -->
  25. </div><!--end main wrapper-->
  26.  
  27. /* CSS */
  28. body { text-align: center; }
  29. #main_wrapper { width: 960px; margin-left: auto; margin-right: auto; text-align: left; }
  30.  
  31. #header { height: 120px; background: transparent url(graphics/logo.jpg) no-repeat top left; }
  32. #header a { width: 145px; height: 120px; display: block; }
  33. #header h1 { display: none; }
  34. #header_inner { }
  35.  
  36. #nav { width: 22%; float: left; }
  37. #nav_inner { padding:1em 1.2em; border-right:3px solid #666; }
  38.  
  39. #content { width: 78%; float: left; top: 0px; }
  40. #content h1, #content a { color: #437fb1; }
  41. #content_inner { padding:2em 6em 1em 3.5em; }
  42.  
  43. #footer { clear:both; }
  44. #footer_inner { padding:.5em 1em; }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.