css实现右侧固定宽度，左侧宽度自适应
文章摘抄 http://jo2.org/css-auto-adapt-width/
1，固定宽度区浮动，自适应区不设宽度而设置 margin
<style type="text/css">
#left{
width:200px;
background:red;
float:left;
}
#content{
background:green;
margin-left:210px;
background:green;
}
</style>
<div id="left">Left sidebar</div>
<div id="content">
<input type="text" value="Main Content" style="width:100%"/>
</div>备注：
假设content的默认宽度是100%，那么他设置了margin后，他的宽度就变成了100%-210，此时content发现自己的宽度可以与sidebar挤在同一行了，于是他就上来了
而宽度100%是相对于他的父标签来的，如果我们改变了他父标签的宽度，那content的宽度也就会变——比如我们把浏览器窗口缩小，那wrap的宽度就会变小，而content的宽度也就变小——但，他的实际宽度100%-310始终是不会变的。
2，固定宽度区使用绝对定位，自适应区照例设置margin
我们把sidebar扔掉，只对content设置margin，那么我们会发现content的宽度就已经变成自适应了——于是content对sidebar说，我的宽度，与你无关。
content很容易就搞定了，此时来看看sidebar，他迫不得已抛弃了float。我们来看看sidebar的特点：在右边，宽度300，他的定位对content不影响——很明显，一个绝对主义分子诞生了。
于是我们的css如下：
<style type="text/css">
#wrap {
*zoom: 1; position: relative;
}
#sidebar {
width: 300px; position: absolute; right: 0; top: 0;border:1px solid red;
}
#content {
margin-right: 310px;border:1px solid green;
}
</style>
</head>
<body>
<div id="wrap">
<div id="sidebar">dasfd</div>
<div id="content">dasfdsaf</div>
</div>
</body>备注：这段css中要注意给wrap加上了相对定位，以免sidebar太绝对了跑到整个网页的右上角而不是wrap的右上角。
3，float与margin齐上阵
经过前面的教训，我们重新确立了这个自适应宽度布局必须要达成的条件：
sidebar宽度固定，content宽度自适应
content要在sidebar之前
后面的元素要能正常定位，不能受影响
由于绝对定位会让其他元素无视他的存在，所以绝对定位的方式必须抛弃。
如果content和sidebar一样，都用float，那content的自适应宽度就没戏了;如果不给content加float，那sidebar又会跑到下一行去。
所以，最终我决定：float与margin都用。
我打算把content的宽度设为100%,然后设置float:left，最后把他向左移动310，以便于sidebar能挤上来。
但这么一来content里面的内容也会跟着左移310，导致被遮住了，所以我们要把他重新挤出来。为了好挤，我用了一个额外的div包裹住内容，所以html结构变成了这种样子：
<style>
#sidebar {
width: 300px; float: right;
}
#content {
margin-left: -310px; float: left; width: 100%;
}
#contentb {
margin-left: 310px;
}
</style>
<div id="wrap">
<div id="content" style="height:140px;">
<div id="contentb">
content自适应区，在前面
</div>
</div>
<div id="sidebar" style="height:240px;">sidebar固定宽度区</div>
</div>大家可能注意到了代码中的两个margin-left，一个-310px一个310px，最后结合起来相当于什么都没干，着实蛋疼。但他确实解决了content与sidebar的顺序问题。
4，标准浏览器的方法
当然，以不折腾人为标准的w3c标准早就为我们提供了制作这种自适应宽度的标准方法。那就简单了：把wrap设为display:table并指定宽度100%,然后把content+sidebar设为display:table-cell;然后只给sidebar指定一个宽度，那么content的宽度就变成自适应了。
.list_row{display:table-row;}
.list_cell{display:table-cell; width:30%; padding:1.6%; background-color:#f5f5f5;}
/*中间一个元素背景淡蓝，有别于两边的淡灰色*/
.list_center{background-color:#f0f3f9;}
<div class="list_row">
<div class="list_cell">你一定也有过这种感觉的。...罗兰《寂寞的感觉》</div>
<div class="list_cell list_center">作为一个被基阿异捅过...水，四积阴功五读书。</div>
<div class="list_cell">奔波了一...永远幸福快乐！</div>
</div>代码很少，而且不会有额外标签。不过这是IE7都无效的方法。
———————割尾巴————————-
如果不考虑ie7及以下版本，则使用标准方法；如果不在意sidebar与content的顺序，则用第一种方法；否则用第3种方法。
以上代码都没在IE6测试，有问题不负责解释。个人觉得，让IE6寿终正寝的办法就是——从此不再理他。