Skip navigation

Category Archives: web design

3 column css with fixed left/right and fluid center, no hack. the point of this css is.

  1. the center div is put after left and right div.
  2. float the left and right,
  3. min-width of the center div and wrapper div, don’t use width on the center div and wrapper div
  4. margin-left and margin-right based on left and rigth div’s width, you can use  % too to make it fluid, of course left and right div’s width must be in %  too.
<!DOCTYPE HTML>
<html>
 <head>
 <style>
 #wrapper{
 min-width:960px;
 }
 #wrapper div{
 min-height:500px;
 border:1px solid black;
 }
 #left{
 width:180px;
 float:left;
 }
 #right{
 width:200px;
 float:right;
 }
 #center{
 min-width:570px;
 margin-left:185px;
 margin-right:205px;
 }
 </style>
 </head>
 <body>
 </body>
 <div id="wrapper">
 <div id="left">this is left</div>
 <div id="right">this is right</div>
 <div id="center">this is center</div>asd
 </div>
 </body>
</html>
Advertisements