于是div结构可写成：
<div id="container">
<div id="header">
</div>
<div id="midbody">
<div id="leftside">
</div>
<div id="rightside">
</div>
</div>
<div id="foot">
</div>
</div>
midbody中的leftside和rightside的css为：
#leftside{
width:220px;
float:left;/*该层位于外层的左边*/
height:500px;
background:#167692;
}
#rightside{
width:558px;
height:500px;
float:right;/*该层位于外层的右边*/
background: #CCCC00;
}
如果是这样的结构：
+------------------------------------+
| |
| header |
| |
|------------------------------------|
| | rightside |
| | rtop |
| | |
|leftside|---------------------------|
| | |rbottom |
| | left | right |
| | | |
| | | |
|------------------------------------|
| |
| foot |
| |
+------------------------------------+
则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;
}
应该很清楚了吧？只要看懂了最外层的到里面都是一样的道理。
源文件在附件里(index1.html为以上上所说样式,index.html为用div画边框线的样式)
