Posted By

artaries on 04/28/10

Tagged

css
html

Versions (?)

Last Edited at 04/28/10 01:55am

Statistics

Viewed 978 times

Favorited by 0 user(s)

Related snippets

Two Column fixed with Layout with CSS

/ Published in: HTML

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<div id="main_wrapper">
 <div id="header">
  <div id="header_inner">
   <a href="index.php?src"><h1>Company Name</h1></a>
  </div><!-- end header_inner -->
 </div><!-- end header -->
 <div id="nav">
  <div id="nav_inner">
   <ul>
    <li><a href="#">Nav item 1</a></li>
    <li><a href="#">Nav item 2</a></li>
   </ul>
  </div><!-- end nav_inner -->
 </div><!-- end nav -->
 <div id="content">
  <div id="content_inner">
   [[Content]]
  </div><!-- end content_inner -->
 </div><!-- end content -->
 <div id="footer">
  <div id="footer_inner">
   [[layout.webpage_footer]]
  </div><!-- end footer_inner -->
 </div><!-- end footer -->
</div><!--end main wrapper-->
 
/* CSS */
body {	text-align: center; }
#main_wrapper {	width: 960px; margin-left: auto; margin-right: auto; text-align: left; }
 
#header { height: 120px; background: transparent url(graphics/logo.jpg) no-repeat top left; }
#header a { width: 145px; height: 120px; display: block; }
#header h1 { display: none; }
#header_inner { }
 
#nav { width: 22%; float: left; }
#nav_inner { padding:1em 1.2em; border-right:3px solid #666; }
 
#content { width: 78%; float: left; top: 0px; }
#content h1, #content a { color: #437fb1; }
#content_inner { padding:2em 6em 1em 3.5em; }
 
#footer { clear:both; }
#footer_inner { padding:.5em 1em; }