div+css经典简单布局

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

　　顶部：header；
　　中部三列的容器：divall；
　　左侧：sider_a；
　　主内容区：main；
　　右侧：sider_b；
　　底部：footer

他们的嵌套关系如下图：

　　我们整理出Html代码： 免费网页模版下载http://www.it55.com

<div id="header">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">footer</div>

我们开始编写Css进行布局：

* {
    margin:0; 
    padding:0; 
    font-size:1em;
}

　　整体局布声明：消除边距，设置文字大小。
　　如果不消除body的边距，在IE等浏览器中，内容不是从左上端的0 0开始的。 vd;k;l http://www.it55.com rdfg

#header {
    width:1002px; 
    height:100px; 
    margin:0 auto; 
    background:#06f;
}
#divall {
    width:1002px; 
    margin:0 auto; 
    background:#fff;
}
#footer {
    width:1002px; 
    height:60px; 
    margin:0 auto; 
    background:#999;
}

　　顶部：宽度高度设置，水平居中对齐，背景色为#06f；
　　中部三列的容器：宽度设置，水平居中对齐，背景色为白色；
　　底部：宽度高度设置，水平居中对齐，背景色为#999。 http://www.it55.com/

#sider_a {
    width:220px; 
    float:left; 
    background:#f93;
}
#main {
    width:580px; 
    float:left; 
    margin-left:6px; 
    background:#dceafc;
} 
#sider_b {
    width:190px; 
    float:right; 
    background:#ccc;
}

　　左侧（sider_a）：宽度设置，向左浮动，背景色为#f93；
　　主内容区（main）：宽度设置，向左浮动，左边距为6px，背景色为#dceafc；
　　右侧（sider_b）：宽度设置，向右浮动，背景色为#ccc；
　　为什么主内容区左边距为6px呢？我们是这样计算的：
　　　　1002-220-580-190=12px
　　　　12/2=6px; 实现中间两条空白分割线相等，均为6px。