Advanced Search

Three Column fixed with layout with CSS

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

Expand | Embed | Plain Text

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.