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

<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部分：

        #one{
             padding-left: 300px;
        }
        #box1{
             float: left;
             margin-top: 50px;
             background-color: #34ED16;
             width: 100%;
             height: 50px;
            position: relative;
         }
        #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部分：

       #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在同一水平位置上