三栏布局（两边固定，中间自适应）

大家理解起来应该没有什么困难，其实三栏式布局和两栏式是相同的，下面我讲一个最简单的三栏布局制作方法。 

DivCss布局二--三栏布局 来源：黄超

[ 点击放大]

请看上面的图片，只将上篇文章中的图片变成了三栏而已，Header和Footer都没有变，所以我们只讲解中间部分的布局方法就好了。  上篇文章定义SideBar为居左显示，MainBody为居右显示，而这里是三列，两个窄列在两边，宽的主要内容在中间。  由此我们可以初步定为让LeftBar向左浮动，RightBar向右浮动，中间的MainBody也让它居左浮动。  Html代码  
  
  

   
   <div id="PageBody"><!--页面主体-->
   
   
 <div id="Leftbar">左侧边栏</div>
   
   
 <div id="MainBody">主体内容</div>
   
   
 <div id="Rightbar">右侧边栏</div>
   
   
 </div>
  
  
  CSS代码  
  
  

   
    /*页面主体*/
   
   
 #PageBody {clear:both;width:900px;height:400px;background:#CCFF00;}/*主体部分的外框*/
   
   
 #Leftbar {width:200px;float:left;}/*左侧栏*/
   
   
 #Rightbar {width:200px;float:right;}/*右侧栏*/
   
   
 #MainBody {width:500px;float:left;height:100%;background:#EEE;}/*中间主要内容栏*/ 
  
  
  LeftBar和RightBar都定义为200像素，分别居左居右显示；Mainbody定义为500像素，居左跟在LeftBar后面显示，两者加起来是最外边框的900像素，不能大过此宽度，否则他们将不能在同一行上显示。  最后，按F12预览一下吧。  也许有些朋友认为这个方法不是最好的，当然，布局方法还有很多，使用定位的方法制作就很不错的，而这里，我讲的只是最简单的一种。