反过来也可以：左侧宽度固定，右侧自适应。不管是左是右，反正就是一边宽度固定，一边宽度自适应。
一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧？
1，固定宽度区浮动，自适应区不设宽度而设置 margin
html
<div id="wrap"> <div id="sidebar" style="height:240px;">固定宽度区</div> <div id="content" style="height:340px;">自适应区</div> </div> <div id="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形</div>
代码中的#wrap的div，是用来包裹我们要定位的这两个区的；他后面还有个#footer，用来测试在前面的定位搞定后会不会导致后面的div错位——如果错位了，那证明我们的定位方法必须改进。
CSS代码如下：
#wrap {
overflow: hidden; *zoom: 1;
}
#content ,#sidebar {
background-color: #eee;
}
#sidebar {
float: right; 300px;
}
#content {
margin-right: 310px;
}
#footer {background-color: #f00;color:#fff; margin-top: 1em}
要注意html中必须使用div标签，不要妄图使用什么p标签来达到目的。因为div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度。这里的content就是例子。
当然我们不能让他填满了，填满了他就不能和sidebar保持同一行了。我们给他设置一个margin。由于sidebar在右边，所以我们设置content的margin-right值，值比sidebar的宽度大一点点——以便区分他们的范围。例子中是310.
假设content的默认宽度是100%，那么他设置了margin后，他的宽度就变成了100%-310
缺点：
但实际上这个方法有个很老火的限制——html中sidebar必须在content之前！
但我需要sidebar在content之后！因为我的content里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。
但如果sidebar在content之后，那上面的一切都会化为泡影。
2，固定宽度区使用绝对定位，自适应区照例设置margin
<div id="wrap"> <div id="content" style="height:340px;">自适应区，在前面</div> <div id="sidebar" style="height:240px;">固定宽度区</div> </div>
css
#wrap {
*zoom: 1; position: relative;
}
#sidebar {
300px; position: absolute; right: 0; top: 0;
}
#content {
margin-right: 310px;
}
缺点：
footer怎么还是在那儿呢？怎么没有自动往下走呢？footer说——我不给绝对主义者让位！
其实这与footer无关，而是因为wrap对sidebar的无视造成的——你再长，我还是没感觉。
看来这种定位方式只能满足sidebar自己，但对他的兄弟们却毫无益处。
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结构变成了这种样子：
<div id="wrap">
<div id="content" style="height:140px;">
<div id="contentb">
content自适应区，在前面
</div>
</div>
<div id="sidebar" style="height:240px;">sidebar固定宽度区</div>
</div>
css这样
#sidebar {
300px; float: right;
}
#content {
margin-left: -310px; float: left; 100%;
}
#contentb {
margin-left: 310px;
}
这样一改，真正的“content”就变成了contentb，他的宽度跟以前的content一样，是100%-310.
大家可能注意到了代码中的两个margin-left，一个-310px一个310px，最后结合起来相当于什么都没干。但他确实解决了content与sidebar的顺序问题。
这个方法的缺点：
就是：太怪异，以及额外多了一层div。
4，标准浏览器的方法
当然，以不折腾人为标准的w3c标准早就为我们提供了制作这种自适应宽度的标准方法。
那就简单了：把wrap设为display:table并指定宽度100%,然后把content+sidebar设为display:table-cell;然后只给sidebar指定一个宽度，那么content的宽度就变成自适应了。
代码很少，而且不会有额外标签。不过这是IE7都无效的方法。
总结
如果不考虑ie7及以下版本，则使用标准方法；如果不在意sidebar与content的顺序，则用第一种方法；否则用第3种方法。