上面两张图就是同一个布局在不同浏览器窗口下打开的效果，可以看见中间宽度随着浏览器宽度变化，左右两边是固定的，但是没有高度相等的效果。
下面是代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0}
body{min-width: 700px;color:#fff}
.header,.footer{background:#333;text-align: center;border:1px solid red;width:100%;clear:both;}
.content{padding:0 250px 0 200px;}
.middle,.left,.right{position:relative;float:left}
.middle{width:100%;background: #FF8286}
.left{margin-left:-100%;left:-200px;width:200px;background:blue}
.right{margin-left:-250px;right:-250px;background:green;width:250px;}
</style>
</head>
<body>
<div class="header">
header
</div>
<div class="content">
<div class="middle">
<p>0000000000000000000000000</p>
<p>0000000000000000000000000</p>
<p>0000000000000000000000000</p>
<p>0000000000000000000000000</p>
</div>
<div class="left">
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
</div>
<div class="right">
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
</div>
</div>
<div class="footer">
fotter
</div>
</body>
</html>
将left middle right 放在一个DIV中，然后 middle放在最前面，这是最重要的，然后对于ｌｅｆｔ与ｒｉｇｈｔ 通过ｍａｒｇｉｎ－ｌｅｆｔ：１００％；然后在通过定位，将他们的位置变换回来，而后就会出现这个效果．
通过一切你们会发现对于ｍｉｄｄｌｅ ｌｅｆｔ ｒｉｇｈｔ 是需要定位ｐｏｓｉｔｉｏｎ：ｒｅｌａｔｉｖｅ；ｆｌｏａｔ：ｅｆｔ；
原文：http://www.cnblogs.com/dengfan/p/4607142.html