左边固定，右边自适应（解决方案）

方法一

html代码：

<div class="container clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>

css代码：

.left {
   background-color: #7ccd7c;
   height: 200px;
   float: left; /*看这里*/
 }
.right {
  background-color: #000080;
  height: 200px;
  overflow: hidden; /*看这里*/
} 

 两行代码搞定！

ps：IE8的时候（只测试到IE8），当可视宽度缩小到比left的width还小的时候，right那块会换行，left那块也不会出现滚动条。

  

方法二

html代码同上。

css代码：

.left {
  background-color: #7ccd7c;
  height: 200px;
  width: 300px;
  float: left; /*看这里*/
}
.right {
  background-color: #000080;
  height: 200px;
  margin-left: 300px; /*看这里*/
} 

 也是两行代码搞定！

ps：IE8的时候（只测试到IE8），当可视宽度缩小到比left的width还小的时候，right不会换行，就是看不见了，left那块也不会出现滚动条。

效果：

   

方法三

左边

position:absolute;

就可以了。

不过这样，IE8的时候（只测试到IE8），当可视宽度缩小到比left的width还小的时候，left那块会出现滚动条。