Advanced Search

Two 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="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.