通常网页的布局只有几种：平铺式、两栏式、三栏式，有人会说没有听说过什么平铺式，呵呵，这是我自己起的名字，指的是那种整个网页内容都在一块区域全部列出来的页面。
在制作网页的时候，不管水平方向有多少行，我们都是按照垂直方向进行整体大布局的，所以两栏和三栏的布局是十分重要的，需要熟练掌握。
本文先讲解两栏布局的基本制作方法，首先大家看一下图一，我们要制作的两栏布局就是如图一所示的，包含header（网站抬头banner）、footer（页脚，版权信息）、sidebar（边侧的工具栏）和mainbody（主要内容区域）四块内容。
拿到这个页面结构图时，首先要考虑一下页面基本结构的制作方法，要用到几个Div，虽然这个布局也能用table进行制作，但我们的目的是学习Div布局，所以一定要用Div加上css来完成。
下面我来列举几点制作页面时我经常想到的几点：
- 页面尺寸，考虑页面是否需要固定宽度和高度，如果内容超出页面如何显示；
- 是否居中，考虑页面是否要居中显示；
- 页面数量和可重复元素，由于网站页面不可能只有一个，所以需要统计页面数量，并且确定页面中是否有需要重复利用的元素，比如标题、导航、工具栏等。利用好这些元素可以提高制作速度、效率，也能使页面风格统一。
- 整体布局的Div嵌套关系。
再看下图一，在首页以外的其他网页中可能用到的可重复元素有Header、Footer、和SideBar，经常变换和更换的只有MainBody里的内容了。而且页面宽度是固定的，所以要在所有的元素外面做一个外框。在心中打完草稿后，在着手制作就不是那么困难了。
按照以上的设想，页面的结构基本如下：
<div id="Wrap"><!--页面层容器-->
<div id="Header">页面头部</div>
<div id="PageBody"><!--页面主体-->
<div id="Sidebar">侧边栏</div>
<div id="MainBody">主体内容</div>
</div>
<div id="Footer">页面底部</div>
</div>
新建一个网页，将以上代码复制到<body>与</body>之间。
这些只是Div的结构，在页面里只会显示出一些堆叠在一起的内容，如果想让他变成图中的样子需要css来定义。
<style type="text/css">
<!--
/*基本信息*/
body {font:12px Simsun;margin:0px;background:#FFF;color:#000;}
/*页面层容器*/
#wrap {width:900px;clear:both;}
/*页面头部*/
#Header {clear:both;height:100px;background:#FFCC99;}
/*页面主体*/
#PageBody {clear:both;height:400px;background:#CCFF00;}
#Sidebar {width:200px;float:left;}
#MainBody {width:700px;float:right;height:100%;background:#EEE;}
/*页面底部*/
#Footer {clear:both;height:50px;background:#00FFFF;}
-->
</style>
css中加了相应的注释，想必大家会看的比较明白了，如果实在看不明白可以翻看一下原来的文章。
简单说明一下上面css的含义。
body中设置的是页面的整体效果，这里定义的是12像素宋体字，上下左右边距都为零，页面背景色为白色，字体颜色为黑色。
Wrap里定义的是最外面的边框，宽度为900像素，清楚左右两侧，也就是它独自占一行。
Header定义的是页面头部div，高度为100像素，背景色为:#FFCC99，Footer定义的是页脚部分，高度为50像素，背景色为#00FFFF。
PageBody是中间SideBar和MainBody外面的容器，为了不发生错位现象，所以需要PageBody对两侧进行清除，让它独占一行。
SideBar定义为200像素，居左显示；Mainbody定义为700像素，居右显示，两者加起来是最外边框的900像素。
现在把以上的css样式表全部复制下来，粘贴到页面的<head>与</head>之间，然后预览一下页面。
大家可以看到，整个外框是居左的，如果想要整个外框居中显示呢？
只要把#Wrap里面加上“margin:0 auto; ”，变成：
#wrap {width:900px;clear:both;margin:0 auto;}
然后再预览一下，已经居中了吧。
![DivCss布局--两栏布局[点击放大]](http://z.abang.com/d/dreamweaver/1/1/d/-/-/-/divcss-2row.jpg)
