第一种:左菜单右边内容自动变宽的布局
CodeCode
第二种，页宽度固定，分栏显示内容
<style type="text/css">
body{ text-align:center; padding:0px; margin:5px; border:0px;}
.topWrap{ overflow:hidden; padding:5px 0px 0px 0px; background:#ccc;}
.headerBox{ margin:0px auto; width:950px; background-color:#aaa; height:30px;}
.banner{margin:0px auto; width:950px; background-color:#888; height:80px;}
.wrap{ margin:0px auto; width:950px; padding:1px 0px 0px 0px; background:#000;}
.p_1{ overflow:hidden; text-align:left; margin-bottom:1px;}
.p_1 .p_l_left{ width:340px; background-color:#ff0000; float:left;}
.p_1 .p_1_middle{ width:340px; background-color:#00ff00; float:left; margin-left:10px;}
.p_1 .p_1_right{ width:250px; background-color:#0000ff; float:left; margin-left:10px;}
</style>
body{ text-align:center; padding:0px; margin:5px; border:0px;}
.topWrap{ overflow:hidden; padding:5px 0px 0px 0px; background:#ccc;}
.headerBox{ margin:0px auto; width:950px; background-color:#aaa; height:30px;}
.banner{margin:0px auto; width:950px; background-color:#888; height:80px;}
.wrap{ margin:0px auto; width:950px; padding:1px 0px 0px 0px; background:#000;}
.p_1{ overflow:hidden; text-align:left; margin-bottom:1px;}
.p_1 .p_l_left{ width:340px; background-color:#ff0000; float:left;}
.p_1 .p_1_middle{ width:340px; background-color:#00ff00; float:left; margin-left:10px;}
.p_1 .p_1_right{ width:250px; background-color:#0000ff; float:left; margin-left:10px;}
</style>
Code<body>
<form id="form1" runat="server">
<div class="topWrap">
<div class="headerBox">header</div>
<div class="banner">banner</div>
</div>
<div class="wrap">
<div class="p_1">
<div class="p_l_left">
<div style=" height:30px;">Left</div>
</div>
<div class="p_1_middle">
<div style=" height:50px;">
Right
</div>
</div>
<div class="p_1_right">
<div style=" height:80px;">Right</div>
</div>
</div>
</div>
</form>
</body>
