<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div + css宽度自适应（液态布局）</title>
<style type="text/css">
<!--
body{margin:0;padding:0px;text-align:center;}
#wrap{margin:0 auto;text-align:left; margin-top:30px;}
/*左边栏，设定宽度*/
.wrap_l{float:left;background:#FF0000;margin-right:-150px;150px;
height:200px; border:3px solid #000;}
/*中间栏，宽度auto http://www.codefans.net/ */
.wrap_m{auto;background:#00FF00;margin:0 146px 0 156px; height:200px;
border:3px solid #999;
}
/*右边栏，固定宽度*/
.wrap_r{float:right;background:#0000FF;margin-left:-140px;140px;
height:200px; border:3px solid #FFFF00;}
.wrap_inner_l{float:left;background:#00FFFF;margin-right:-200px;200px;height:200px; }
.wrap_inner_m{auto;background:#FFFF00;margin:0 0 0 200px;height:200px; }
-->
</style>
</head>
<body>
<div id="wrap">
<div class="wrap_l">
这是左边部分<br />
这是左边部分<br />
这是左边部分
</div>
<div class="wrap_r">
这是右边部分<br />
这是右边部分<br />
这是右边部分
</div>
<div class="wrap_m">
这是中间部分
<!--<div class="wrap_inner_l">中间的左边</div>
<div class="wrap_inner_m">中间的右边</div>-->
这是中间部分
</div>
</div>
</body>
</html>