反过来也可以：左侧宽度固定，右侧自适应。不管是左是右，反正就是一边宽度固定，一边宽度自适应。
这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧？
要实现这种布局，也算比较简单。我们先给出html结构：
1 2 3 4 5 |
代码中的#wrap的div，是用来包裹我们要定位的这两个区的；他后面还有个#footer，用来测试在前面的定位搞定后会不会导致后面的div错位——如果错位了，那证明我们的定位方法必须改进。
下面列举几个常见的方法：
1，固定宽度区浮动，自适应区不设宽度而设置 margin
我们拿右边定宽左边自适应来做示范,CSS代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 | #wrap { overflow: hidden; *zoom: 1; } #content ,#sidebar { background-color: #eee; } #sidebar { float: right; width: 300px; } #content { margin-right: 310px; } #footer {background-color: #f00;color:#fff; margin-top: 1em} |
其中，sidebar让他浮动，并设置了一个宽度；而content没有设置宽度。
大家要注意html中必须使用div标签，不要妄图使用什么p标签来达到目的。因为div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度。这里的content就是例子。
当然我们不能让他填满了，填满了他就不能和sidebar保持同一行了。我们给他设置一个margin。由于sidebar在右边，所以我们设置content的margin-right值，值比sidebar的宽度大一点点——以便区分他们的范围。例子中是310.
假设content的默认宽度是100%，那么他设置了margin后，他的宽度就变成了100%-310，此时content发现自己的宽度可以与sidebar挤在同一行了，于是他就上来了。
而宽度100%是相对于他的父标签来的，如果我们改变了他父标签的宽度，那content的宽度也就会变——比如我们把浏览器窗口缩小，那wrap的宽度就会变小，而content的宽度也就变小——但，他的实际宽度100%-310始终是不会变的。
这个方法看起来很完美，只要我们记得清除浮动(这里我用了最简单的方法)，那footer也不会错位。而且无论content和sidebar谁更长，都不会对布局造成影响.
但实际上这个方法有个很老火的限制——html中sidebar必须在content之前！
但我需要sidebar在content之后！因为我的content里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。
但如果sidebar在content之后，那上面的一切都会化为泡影。
可能有的人不理解，说你干嘛非要sidebar在后面呢？这个问题说来话长，反正问题就是——content必须在sidebar之前，但content宽度要自适应，怎么办？
下面有两个办法，不过我们先把html结构改成我们想要的样子：
1 2 3 4 |
2，固定宽度区使用绝对定位，自适应区照例设置margin
我们把sidebar扔掉，只对content设置margin，那么我们会发现content的宽度就已经变成自适应了——于是content对sidebar说，我的宽度，与你无关。
content很容易就搞定了，此时来看看sidebar，他迫不得已抛弃了float。我们来看看sidebar的特点：在右边，宽度300，他的定位对content不影响——很明显，一个绝对主义分子诞生了。
于是我们的css如下：
1 2 3 4 5 6 7 8 9 | #wrap { *zoom: 1; position: relative; } #sidebar { width: 300px; position: absolute; right: 0; top: 0; } #content { margin-right: 310px; } |
这段css中要注意给wrap加上了相对定位，以免sidebar太绝对了跑到整个网页的右上角而不是wrap的右上角。
好像完成了？在没有看footer的表现时，我很欣慰。我们来把sidebar加长——增长100px！不要一年，只要一条内裤！哦，，，只要一句代码。
但是，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结构变成了这种样子：
1 2 3 4 5 6 7 8 |
css则变成这样：
1 2 3 4 5 6 7 8 9 | #sidebar { width: 300px; float: right; } #content { margin-left: -310px; float: left; width: 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种方法。
以上代码都没在IE6测试，有问题不负责解释。个人觉得，让IE6寿终正寝的办法就是——从此不再理他。
厉害
第三种方法有效，看看我的代码，直接复制粘贴试试就行
Document
.head{
height: 100px;
width: 100%;
background-color: green;
}
.content{
height: 300px;
width: 100%;
overflow: hidden;
}
.content .content_main{
float: left;
margin-left: -210px;
height: 100%;
width: 100%;
background-color: blue;
}
.content_main_b{
margin-left: 210px;
}
.content .content_side{
float: right;
width: 200px;
height: 100%;
background-color: red;
}
.foot{
height: 100px;
width: 100%;
background-color:black;
}
其实可以参考双飞翼布局和圣杯布局，把三栏改成两栏就行了，类似的方法
<div style="float:left;width:px;”>
讲道理这样的布局比较好, 不需要依赖左侧栏的宽度, 尽管可以使用less或sass这些的变量去统一..但还是能不依赖的情况下. 对样式代码的修改也还是会更方便易懂一些.
第三种方法失败了
不错，学习了。我是一直做后端的，现在开始学习前端了，可以来跟楼主DN学学。
so cool,
同样适用margin-right也可以。
#content {
margin-right:-310px;float: left; width: 100%;
}
#contentb {
margin-right:310px;
}
我把代码放到网页中试了一下，你的第三种方法左栏好像不能实现自适应,不知道你自己有没有动手试过，下面我贴上我的代码
两列左侧自适应布局
* {margin:0;padding:0;}
body{ width:960px; margin:0 auto; padding:0;border:1px solid;font-size:20px;}
li {
list-style-type:none;
}
.header{height:50px; background:black; color:white;}
#contentb ,#sidebar {
background-color: #eee;
}
#sidebar {
width: 300px; float: right;
}
#content {
margin-left: -310px; float: left; width: 100%;
}
#contentb {
margin-left: 310px;
}
.footer{ height:50px; color:white; background:black; clear:both;}
head
晕轮效应
晕轮效应最早是由美国著名心理学家桑戴克于本世纪二十年代提出的。他认为，人们对人的认知和判断往往只从局部出发，扩散而得出整体印象，也即常常以偏概全。一个人如果被标明是好的，他就会被一种积极肯定的光环笼罩，并被赋予一切都好的品质；如果一个人被标明是坏的，他就被一种消极否定的光环所笼罩，并被认为具有各种坏品质。这就好象刮风天气前夜月亮周围出现的圆环（月晕），其实呢，圆环不过是月亮光的扩大化而已。据此，桑戴克为这一心理现象起了一个恰如其分的名称“晕轮效应”，也称作“光环作用”。
链接1
链接2
链接3
链接4
链接5
链接6
footer
第三种诡异的方法终于弄懂了
1，固定宽度区浮动，自适应区不设宽度而设置 margin中
如果不给content一个高度、在里面加一个、这样content会和sidebar一样高、但是我并不想这样、我只想清除content里面的浮动而已、
怎么才能做到在清除content里面的float、而不让content的高度高出sidebar、
给出代码
Document
.d1 {
width:100px;
height: 500px;
border: 1px solid black;
float: left;
}
.d2 {
border: 4px solid red;
margin-left: 110px;
}
1，固定宽度区浮动，自适应区不设宽度而设置 margin中
如果不给content一个高度、在里面加一个、这样content会和sidebar一样高、但是我并不想这样、我只想清除content里面的浮动而已、
怎么才能做到在清除content里面的float、而不让content的高度高出sidebar、
给出代码
Document
.d1 {
width:100px;
height: 500px;
border: 1px solid black;
float: left;
}
.d2 {
border: 4px solid red;
margin-left: 110px;
}
分析得好，很详细，给10000个赞
<div style=”width:100%”><div style=”width:300px;float:right;;”></div><div style=”width:auto;margin-right:310px;”></div></div>
厉害