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

HTML程序：

<div style="padding: 0 400px 0 300px;" class="box">
    <div id="box5">box5</div>
    <div id="box6">box6</div>
    <div id="box7">box7</div>
</div>
<div class="box">
    <div id="box9"></div>
</div>

方法一css程序：

      <pre name="code" class="css">#box5{
            float: left;
            margin-top: 50px;
            background-color: #34ED16;
            width: 100%;
            height: 50px;
        }
        #box6{
            float: left;
            background-color: blue;
            width: 300px;
            height: 50px;
            margin:50px 0 0 -100%;
            position: relative;
            left: -300px;
        }
        #box7{
            float: right;
            background-color: aquamarine;
            width: 400px;
            height: 50px;
            margin:50px -400px 0 0;
        }

方法二css程序：

#box9{
            float: left;
            margin-top: 150px;
            border-left: solid 300px #34ED16;
            border-right:solid 300px aquamarine;
            background-color: blue;
            width: 55.5%;
            height: 50px;
        }