首先完成中间自适应部分
这个简单，设置个左右外边距加上颜色就可以了。
<style>
.main{
float:left;
width:100%;
}
.main_body{
margin:0 210px;/*上外边距和下外边距是 0px右外边距和左外边距是 5px*/
background:#888;
height:200px;
}
</style>
<div class="main">
<div class="main_body">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
结果
image.png
实现两侧固定部分
为了让实现div元素处于一行，首先左侧必须float。
好，加上
.left{
float:left;
width:200px;
height:200px;
background:#F60;
}
结果如图
哎，不对劲啊
image.png
怎么left跑下面去了。因为main元素是float，还是100%。所有后面的自然只有往下排放了。
那再加一句
.left{
margin-left:-100%;
}
结果如图。为啥 margin-left:-100%就能让他两排一排呢？
image.png
改成-10%试试。
image.png
marigin-left使得元素自身向左移动，上述-100%折合多少px？应该是整个浏览器那么宽，下面这行不够移了，移到上一行去了。
再看看-80%
image.png
事实上，移到-100%，刚好能移到到最左边。
好现在把右边的也加上
.right{
float:left;
width:200px;
height:200px;
background:#F60;
}
结果如下
image.png
如何让右侧的也移动到第一行呢？margin-left值设置多少？如果设置-50%，就过头了。
image.png
right的宽度是-200，那就设置-200px。
刚好
image.png
总结代码
<style>
body{
margin:0;
padding:0;
min-width:600px;
}
.main{
float:left;
width:100%;
}
.main_body{
margin:0 210px;
background:#888;
height:200px;
}
.left,.right{
float:left;
width:200px;
height:200px;
background:#F60;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}
</style>
<div class="main">
<div class="main_body">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
总结
关键几点，
自适应的部分不要设置float，左侧和右侧都要设置float。
理解margin-left的作用，向左移动，移动到左侧尽头就向上一行左侧移动，这个设定有点trick。
负margin绝壁是个trick。虽然有些人不这么认为
image.png
思考：为啥main必须是float~
以上纯属个人试验，正确性不做保证。。
