>>> 下载【朝花夕拾 – DIV+CSS布局实战系列视频教程】图片素材
导航菜单制作好之后，接下来我们就可以开始规划网页中左右分栏的主内容部分了。首先我们必须先把分栏的布局实现出来，方法有很多，我们这里讲解其中比较典型的一种，就是利用浮动属性来实现。如果你对CSS中的浮动属性还不是很熟悉，可以先花点时间看一下《柳暗花明：视频讲解CSS中的浮动属性Float》教程，相信看完之后再练习一遍本教程的操作，就不会再对浮动属性感到陌生了。
首先我们在HTML中添加基于分栏模式的标签结构，其中包含外围、左侧、右侧三个容器，添加的位置就是在ID为header的DIV容器结束标签之后：
结构很明了的三个容器，因为在未设定任何CSS的情况下DIV容器在浏览器中是没有任何外观视觉上的呈现的，所以为了更直观的进行布局规划，我们可以先为这些容器添加一些属性，来辅助我们观察它们在浏览器中的尺寸、位置等信息，以便我们进行深入的调整。可以用于辅助的属性有很多，应用最广泛的是边框和背景，在这里我们分别为三个容器设置不同颜色的背景，当然还有高度值：
#content{
height:240px;
background:#000;
}
#main{
height:100px;
background:#f00;
}
#side{
height:100px;
background:#0f0;
}
浏览器中预览效果如下：
红色背景的区块表示main容器，绿色的表示side容器，黑色的则表示除去两个子容器的高度之和后，容器content还剩余的40像素可视区域。接下来我们就可以开始实施分栏布局的操作了，首先设置main容器的宽度和填充：
#main{
... ...
width:415px;
padding:5px 5px 5px 15px;
}
为了防止大家迷糊，我用省略号表示之前已经讲解定义好的CSS属性。计算之后，我们的main容器总共占据的宽度为435像素，这个数值我们用于参考计算side容器的宽度，很简单的运算，699减去435得出264像素，我们参考这个数值将侧边栏的宽度定义为260像素：
#side{
... ...
width:260px;
}
两个子容器的宽度定义好之后，在浏览器中呈现的外观如下：
分别为main和side设置左、右浮动实现分栏：
#main{
... ...
float:left;
}
#side{
... ...
float:right;
}
浏览一下效果：
虽然已经很好的达到了分栏的目的，可是考虑到浮动在CSS中还是比较难控制的一个属性，有时候我们也可以使用另外的方法来实现分栏，比如利用margin属性来控制side容器的位置。因为当我们对main容器应用了左浮动之后，它已经从文档流中脱离了出来，我们不用去考虑side容器的margin会对它产生影响，我们只要把侧边栏的位置定位准确就行了。我们把#side中的浮动设置取消掉，替换以边界属性：
#side{
... ...
margin:0 0 0 435px;
}
同样很好的实现了分栏，而且可以省去对设置浮动属性产生潜在副作用的担心。当然现在由于一些辅助属性的设置，使得我们绕过了浮动清除的问题，索性就在后面的教程中再补充这个问题吧。现在我们逐步的把之前设置的背景属性撤销掉，换之以一些背景图片，首先是content容器，背景属性替换为如下规则：
#content{
... ...
background:url(images/contentbg.jpg) repeat-y;
}
这个效果就是主内容区左右两侧的阴影。接下来观察一下侧边栏背景中的阴影：
它并不是一张图片简单的纵向平铺，在它的底部还有一个渐隐的效果。当然我们也不能仅用一张不平铺的大图来实现这个背景，因为它还要能根据侧边栏内容进行高度上的扩展。综合以上因素，我们可以考虑将这个背景划分成上下两块，上方部分用单像素高度的图片垂直平铺，而下方部分仅仅是一张不平铺的渐隐图片，这样一来就既能实现高度自适应，又能兼顾视觉效果上的完整。要实施这种方法，首先我们要在side容器中添加两个子容器，事实上也就是将side划分成上下两块：
然后利用裁剪出来的背景素材设置CSS：
#sidecontent{
height:200px;
background:url(images/sidebarbg.jpg) repeat-y;
}
#sidebottom{
height:74px;
background:url(images/sidebarbottom.jpg) no-repeat;
}
在sidecontent中的高度仍然是一个辅助属性，帮助我们观察预览效果的，而sidebottom中的74像素高度则是根据其背景图片的尺寸确定下来的，这个属性我们要一直保留。接下来把之前为main和side设置的辅助背景色属性删除掉，在浏览器中预览网页的效果：
现在结合背景图像的左右分栏主内容布局基本上已经出来了，为了便于大家理解教程而添加的一些辅助CSS还没有彻底的清理，我们还是放到以后的教程中再行慢慢解决。