A simple wayy to create a 3 column design on your site:

On your HTML:

<div id="wrapper">
 <div id="header">
  HEADER
 </div>
 <div id="container">
  <div id="leftside">
   SIDE A
  </div>
  
  <div id="content">
   CONTENT
  </div>
  
  <div id="rightside">
   SIDE B
  </div>
 </div>
 <div id="footer">
  FOOTER
 </div>
</div>


On your CSS:

#wrapper {
 text-align: left;
 margin: 0px auto;
 padding: 0px;
 border:0;
 width: 900px;
}

#header {
 margin: 0 0 15px 0;
 background: yellow;
}

#leftside {
 float: left;
 width: 300px;
}

#rightside {
 float: right;
 width: 300px;
}

#content { 
 float: left;
 width: 32%;
}

#footer {
 clear: both;
 background: #A2A2A2;
}

No comments :

Post a Comment