左侧固定，右侧宽度自适应

这里用到两种方法实现实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 。

每个例子我都用两幅图对比效果。黄色部分的宽度就是大框架的宽度，我们可以看到红色区域不发生改变，红色区域随着黄色区域宽度的改变而改变。
html部分

<div class="box1">
    <div class="divA">DIVA</div>
    <div class="divB">DIVB</div>
    <div class="divC">DIVC</div>
</div>
<div class="box2">
    <div class="divA">DIVA</div>
    <div class="divB">DIVB</div>
    <div class="divC">DIVC</div>
</div>

1. 方法1
   红色部分float:left;蓝色部分margin-left:150px;150px是红色部分的宽度。

*{margin:0;padding:0;}
.box1{width:500px;margin-left:100px;}
.box2{width:600px;margin-left:100px;margin-top:20px;}
.divA{width:150px;background:red;text-align:center;float:left;}
.divB{margin-left:150px;background:blue;text-align:center;}
.divC{background:yellow;text-align:center;}

效果图

注意：当蓝色部分不设置它的margin-left时；红色部分的宽度将会是黄色部分的宽度，然后把蓝色部分的内容挤到右边了。但是红色部分还会向效果图里那样，不过是把蓝色部分给遮挡了，当红色的高度比蓝色高度要高时，我们会发现这种效果：

2. 方法2
大框架box部分定位为position:relative;红色部分采用的时position:absolute;这两句话使得红色部分可以相对于大框架box绝对定位；所以设定left:0px;紧贴着大框架box；蓝色部分任然是marign-left:150px;如果省略了这句话，效果将和方法1中注意部分一样，这里就不分析了。

*{margin:0;padding:0;}
.box1{width:500px;margin-left:100px;position:relative;}
.box2{width:600px;margin-left:100px; margin-top:20px;position:relative;}
.divA{width:150px;background:red;position:absolute; left:0px;text-align:center;}
.divB{background:blue;margin-left:150px; text-align:center;}
.divC{background:yellow;text-align:center;}

效果图：