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

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

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预览一下吧。 也许有些朋友认为这个方法不是最好的，当然，布局方法还有很多，使用定位的方法制作就很不错的，而这里，我讲的只是最简单的一种。