首先我们大致的花了一个草图，理清一下思路。在实际操作中，你面对的可能不是草图，而是美工设计人员所设计的网站效果图，但大体上的结构是相当的，我们看下面的图片：

图片文字说明：
我们将顶部和底部设置为宽度960px左右，并居中对齐，以适应更大分辨率的需要。将中部的三列，即左侧，主内容区，右侧。置于一个div容器中，并将此div设置为宽度960px左右，并居中对齐。再将此容器内的左侧，主内容区，右侧分别设置宽度、应用浮动标签，以达到我们想预想的CSS布局效果。

根据上面的图片示意，我们整理出各个div的id以及他们的关系：

　　顶部：header_common；

　　中部三列的容器：divall；

　　左侧：sider_a；

　　主内容区：main；

　　右侧：sider_b；

　　底部：footer_common

HTML代码:

<div id="header_common">header</div>

<div id="divall">

　　<div id="sider_a">sider_a</div>

　　<div id="main">main</div>

　　<div id="sider_b">sider_b</div>

</div>

<div id="footer_common">footer</div>

CSS布局样式：

* {                          //页面全局声明：消除边距，设置文字大小。
margin:0;
padding:0;
font-size:1em;
}                      

#header_common {           //顶部：宽度高度设置，水平居中对齐，背景色为#3399FF
width:960px;
height:90px;
margin:0 auto;
background:#3399FF;
}

#divall {                           //中部三列的容器：宽度设置，水平居中对齐，背景色为白色
width:960px;
margin:0 auto;
background:#fff;
}

#footer_common {             //底部：宽度高度设置，水平居中对齐，背景色为#003300
width:960px;
height:60px;
margin:0 auto;
background:#003300;
}

#sider_a {                        //左侧（sider_a）：宽度设置，向左浮动，背景色为#FFCC99
width:235px;
float:left;
background:#FFCC99;
}

#main {                             //主内容区（main）：宽度设置，向左浮动，左边距为10px，背景色为#C4C4FF
width:435px;
float:left;
margin-left:10px;
background:#C4C4FF;
}

#sider_b {                          //右侧（sider_b）：宽度设置，向右浮动，背景色为#999
width:280px;
float:right;
background:#999;
}

写到这里，我们布局应该算是完成了。

但是由于我们没有消除下边距的原因，暂时你如果在MSIE和FireFox这两个浏览器中，会看到显示效果大不相同。在MSIE中，一切正常，没有任何问题了。但在Firefox中footer却隐藏到上面的层后面去了。

我们需要在浮动的层下面加上消除下边距的参数：

<div style="clear:both"></div>

添加后。测试显示正常。


如果你的页面中div不能水平居中，请参照这篇文章：
https://www.fity.cn/post/166/

相关文章

• css ~ , + >
• ul菜单居中_水平居中css样式
• div默认高度及高度自适应
• CSS样式优先级
• 高级CSS样式选择器