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

[html]   view plain  copy  

1. <pre name="code" class="html"><div id="one" class="box">  
2.     <div id="box1" >box1</div>  
3.     <div id="box2" >box2</div>  
4. </div>  
5. <div class="box">  
6.     <div id="box3" >box3</div>  
7.     <div id="box4" >box4</div>  
8. </div>  

方法一的css部分：

[css]   view plain  copy  

1. #one{  
2.      padding-left: 300px;  
3. }  
4. #box1{  
5.      float: left;  
6.      margin-top: 50px;  
7.      background-color: #34ED16;  
8.      width: 100%;  
9.      height: 50px;  
10.     position: relative;  
11.  }  
12. #box2{  
13.     float: left;  
14.     margin-top: 50px;  
15.     background-color: greenyellow;  
16.     width: 300px;  
17.     height: 50px;  
18.     margin-left: -100%;  
19.     position: relative;  
20.     left: -300px;  
21. }  

注意：父节点设置padding-left：300px，相当于设置左边部分宽度为300px,而右边宽度为：100%-300px。

           用relative来固定左边和右边的位置。

方法二的css部分：

[css]   view plain  copy  

1. #box3{  
2.      margin-top: 180px;  
3.      background-color: bisque;  
4.      width: 300px;  
5.      height: 50px;  
6.  }  
7.  #box4{  
8.      margin-top: -50px;  
9.      margin-left: 300px;  
10.      background-color: #ff0000;  
11.      height: 50px;  
12.  }  

注意：box4设置成margin-top:-50px，是为了让box3和box4在同一水平位置上