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

HTML程序：

[html]   view plain  copy  

1. <div style="padding: 0 400px 0 300px;" class="box">  
2.     <div id="box5">box5</div>  
3.     <div id="box6">box6</div>  
4.     <div id="box7">box7</div>  
5. </div>  
6. <div class="box">  
7.     <div id="box9"></div>  
8. </div>  

方法一css程序：

[css]   view plain  copy  

1. <pre name="code" class="css">#box5{  
2.       float: left;  
3.       margin-top: 50px;  
4.       background-color: #34ED16;  
5.       width: 100%;  
6.       height: 50px;  
7.   }  
8.   #box6{  
9.       float: left;  
10.       background-color: blue;  
11.       width: 300px;  
12.       height: 50px;  
13.       margin:50px 0 0 -100%;  
14.       position: relative;  
15.       left: -300px;  
16.   }  
17.   #box7{  
18.       float: right;  
19.       background-color: aquamarine;  
20.       width: 400px;  
21.       height: 50px;  
22.       margin:50px -400px 0 0;  
23.   }  

方法二css程序：

[css]   view plain  copy  

1. #box9{  
2.             float: left;  
3.             margin-top: 150px;  
4.             border-left: solid 300px #34ED16;  
5.             border-right:solid 300px aquamarine;  
6.             background-color: blue;  
7.             width: 55.5%;  
8.             height: 50px;  
9.         }