css布局之圣杯布局

圣杯布局：都为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）
　　　　
实现思路：
　　　　　　使用float布局框架 ， 用margin为负值 ， position: relative定位
优点

　　　　（1）兼容性好，兼容若有主流浏览器，包括万恶的IE6
　　　　（2）可以实现主要内容的优先加载

<div class="container">
        <div class="middle">圣杯布局的中间自适应部分</div>
        <div class="left">圣杯布局左边固定宽度部分</div>
        <div class="right">圣杯布局右边固定宽度部分</div>
</div>

 1 .container {
 2             /* 这里也可以使用margin：0 200px 0 200px */
 3             padding: 0 200px 0 200px;
 4             overflow: hidden;
 5         }
 6         
 7         .middle,
 8         .left,
 9         .right {
10             float: left;/*三个盒子都浮动*/
11             position: relative;/*相对定位*/
12         }
13         
14         .middle {
15             width: 100%;
16             background-color: blue;
17         }
18         
19         .left {
20             width: 200px;
21             background-color: red;
22             margin-left: -100%;
23             left: -200px;
24         }
25         
26         .right {
27             width: 200px;
28             background-color: green;
29             margin-left: -200px;
30             right: -200px;
31         }