Skip navigation

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

3 Comments

  1. hei can u tell me what is fluid means?
    sorry i don’t realy understand your post…(I’m a newbie…>.<)

  2. btw, can u add me to your blogroll?>.<

  3. add me to.
    fluid nya translate aja lah…. wkwkkw


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: