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

[html] view
plain copy 





<pre name="code" class="html"><div id="one" class="box">  

    <div id="box1" >box1</div>  

    <div id="box2" >box2</div>  

</div>  

<div class="box">  

    <div id="box3" >box3</div>  

    <div id="box4" >box4</div>  

</div>  

方法一的css部分：

[css] view
plain copy 





#one{  

     padding-left: 300px;  

}  

#box1{  

     float: left;  

     margin-top: 50px;  

     background-color: #34ED16;  

     width: 100%;  

     height: 50px;  

    position: relative
df65
;  

 }  

#box2{  

    float: left;  

    margin-top: 50px;  

    background-color: greenyellow;  

    width: 300px;  

    height: 50px;  

    margin-left: -100%;  

    position: relative;  

    left: -300px;  

}  

注意：父节点设置padding-left：300px，相当于设置左边部分宽度为300px,而右边宽度为：100%-300px。
           用relative来固定左边和右边的位置。

方法二的css部分：

[css] view
plain copy 





#box3{  

     margin-top: 180px;  

     background-color: bisque;  

     width: 300px;  

     height: 50px;  

 }  

 #box4{  

     margin-top: -50px;  

     margin-left: 300px;  

     background-color: #ff0000;  

     height: 50px;  

 }  

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