如今web2.0炒的很厉害,先不去管它web2.0究竟是什么东西,反正div+css好像是火的不行了.各大 知名站点都赶时髦似的把原来的表格布局翻新成了div+css,并美其名曰"本站符合web2.0标准",以便让别人觉得他们的网站用的是最先进的技 术.div布局真有那么先进么?这个问题仍在争论之中.在这里咱们不参与这种无聊的争论,学会它自己感觉一下不就清楚了么?
???? 实际上div布局并不是什么高深的东西,如果你知道一点css就变得更简单了.首先我要说明几点:

?于是我们可以把整个页面放在一个大div内,于是我们可以这样来写<div>结构:

<div   id="container">/*大容器放全部内容*/
     <div id="header">/*上*/
     </div>
     <div id="midbody">/*中*/
     </div>
     <div id="foot">/*下*/
     </div>
</div>

? 解释下上面的id是什么东西,id后面的内容是当前div以及div内部的东西用的css,这个css可
以规定div的宽度,大小,位置以及内部文字的大小、样式、颜色等等。
下面看下这几个css的代码 ：

#container{
     width:90%;/*宽度*/
     margin: 0 auto;/*边界auto为自动，这里用到了缩写形式意思为上下为0，
                           左右自动*/
     }
/*页面头*/
#header{
width:780px;
height: 130px;
margin: 0 auto;
overflow:hidden;/*防止div被撑开，超过div大小就隐藏*/
background:#999999;/*背景色*/
}
/*页面中间*/
#midbody{
width:780px;
height: auto;
height:auto;
margin:0 auto;
overflow:hidden;
background: #990000;
}
/*页面底部*/
#foot{
width:780px;
height:100px;
margin:0 auto;
background: #99FFCC;
}

? 看完整体就要研究部分了，对于部分来说无非就是上下或左右结构了，例如下面的中间又分为左右。

<div   id="container">
    <div id="header">
    </div>
    <div id="midbody">
       <div id="leftside">
       </div>
       <div id="rightside">
       </div>
    </div>
    <div id="foot">
    </div>
</div>

?Left / Right :

#leftside{
width:220px;
float:left;/*该层位于外层的左边*/
height:500px;
background:#167692;
}
#rightside{
width:558px;
height:500px;
float:right;/*该层位于外层的右边*/
background: #CCCC00;
}

?如果是这样的结构：

?div结构为：

<div   id="container">
    <div id="header">
    </div>
    <div id="midbody">
       <div id="leftside">
       </div>
       <div id="rightside">
          <div id="rtop">
          </div>
          <div id="rbottom">
              <div id="left">
              </div>
              <div id="right">
              </div>
          </div>
       </div>
    </div>
    <div id="foot">
    </div>
</div>

?CSS：

#rtop{
width:558px;
height:200px
margin:0 auto;
background: #CCCC00;
}
#rbottom{
width:558px;
height:300px;
margin:0 auto;
background: #CCee00;
}
#left{
width:258px;
float:left;
height:300px;
background: #CCCCed;
}
#rightside{
width:300px;
height:300px;
float:right;
background: #Cdfd00;
}

?只要看懂了最外层的到里面都是一样的道理。

来源：http://blog.csdn.net/brucelee0224/article/details/3009741