mark http://jsfiddle.net/jikeytang/b75z9/2/ div layout
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{ margin:0; padding:0; }
.w{ width:100%; clear:both; overflow:hidden;}
.l{ width:95px; float:left;border:1px solid red;height:100px;}
.r{ width:95px; float:right;border:1px solid green;height:100px;}
.m{ margin:0 100px; position:relative;top: 0;border:1px solid blue;height:100px;}
.a{ width:80%; margin-right:18%;border:1px solid orange;height:300px;}
.b{ width:18%; float:right;border:1px solid green;height:300px;}
.c{ width:18%; float:left;border:1px solid green;height:300px;}
.d{ width:80%; margin-left:18%;border:1px solid orange;height:300px;}
</style>
</head>
<body>
<!-- 中自适应,两边固定 -->
<div class="w">
<div class="r">right</div>
<div class="l">left</div>
<div class="m">middle</div>
</div>
<br>
<!-- 左自适应,右固定 -->
<div class="w">
<div class="b">right</div>
<div class="a"></div>
</div>
<br>
<!-- 左固定,右自适应 -->
<div class="w">
<div class="c">right</div>
<div class="d"></div>
</div>
</body>
</html>