要么就是把#div_left_bottom{
background-color:#66CC66
width:100%
position:relative
top:300px
}
这个top值改小,但是这样弄的话,上面几个模块如果内容增加div高度变高的话,那么就会被这个层挡住,给你一个建议,绝对定位和相对定位不要随便乱用,因为很容易把布局全都定死,不好修改;还有就是float值能不用就尽量别用,用的不熟的人比较容易出错
我给你把整体布局做一下修改,希望是你要的
<style type="text/css">
body{ margin:0padding:0}
#main{width:98%}
#div_left{
height:500px
background-color: #FF0000
border-right-color: #2A5CAEborder-right-width:2pxborder-right-style:solid
border-bottom-color: #2A5CAEborder-bottom-width:5pxborder-bottom-style:solid
}
#div_leftbox{
float:left
width:200px
}
#div_left_top{
background-color:#3300CC
height:300px
}
#div_left_bottom{
background-color:#66CC66
}
#div_right{
background-color:#00FF66
overflow:auto
margin-left:200px
}
</style>
</head>
<body>
<div id="main">
<div id="div_leftbox">
<div id="div_left">
<div id="div_left_top" style="vertical-align:bottom ">b</div>
</div>
<div id="div_left_bottom" >c</div>
</div>
<div id="div_right">d</div>
</div>
</body>