博问 / 全部问题 / Web开发 / HTML/CSS基础

如下是一个左右布局，如何让sidebar宽度是200px，mainbody自动把右边的屏幕区域填满呀，而且把浏览器的窗口缩小后，不会让mainbody跑到sidebar下面，我现在是在mainbody上加了个left的绝对布局才让mainbody不会跑到sidebar下面。
<style>
#pagebody {
width:98%; /*设定宽度*/
margin:8px auto; /*居中*/
min-height:300px;
padding:0px 5px 0px 5px;
}
#sidebar {
width:200px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border-left: 2px solid #666;
border-top: 2px solid #666;
border-right: 1px solid #666;
text-align: left;
vertical-align: top;
height:200px;
padding:2px;
margin-right:10px;
}
#mainbody
{
position: absolute;
left:230px;
width:700px;
text-align:left;
clear:right; /*不允许右侧存在浮动*/
overflow:hidden;
height:200px;
border-left: 1px solid #666;
border-top: 2px solid #666;
border-right: 2px solid #666;
text-align: left; vertical-align: top;
}

</style>
<div id="pagebody">
    <!--页面主体-->
    <div id="sidebar">
        <!--侧边栏-->
    </div>
    <div id="mainbody">
        <!--主体内容-->
    </div>
</div>

问题补充：@扑街仔
ie6不支持min-width的。
如果一个两列的宽度为100%表格，左边的单元格设置为200px，右边的单元格会自动把占满。
而两个高度一样div如果想弄成一行模仿左右布局，左边的一个设置为固定像素，右边那个就不会自动填充剩下的屏幕区域，右边那个必须也设置一个固定像素宽，而且你把浏览器整个窗口缩小后，本来是左右的两个div会变成上下布局了，错位了。