css3圣杯布局

实例说明
圣杯布局是左右两栏定宽
中间一列为流式布局
其优势是重要的东西放在文档流前面可以优先渲染
用到的：浮动，负边距，相对定位，不添加额外标签
html
<div id="header">头部</div>
<div id="container">
<div id="left" class="column">左</div>
    <div id="center" class="column">中</div>
    <div id="right" class="column">右</div>
</div>
<div id="header">尾部</div>
css代码
<style type="text/css">
body{
min-width:550px;/*因为中间的center是流式的，当窗口大小缩小到X+Y的时候，center就没有了，所以要给个#container设置一个最小宽度*/
}
/*这个是头部*/
#header{
display:block;/*转换为块级*/
margin:4px;/*边框与窗口的距离*/
padding:5px;/*内容与边框的距离*/
min-height:100px;
border:1px solid #eebb55;
background-color:#F30;
}
#container{
padding-left:200px;/*内容左边的宽度是200px,也就是要设置左边的宽度*/
padding-right:150px;/*内容右边的宽度是200px,也就是要设置右边的宽度*/
border:1px solid #eebb55;
border-radius:7pt;/*把边框设置为圆角*/
}
#container .column{
float:left;/*全部浮动在同一层*/
position:relative;/*每一列都是相对定位*/
/*在使用相对定位时，无论是否进行移动，元素任然占据原来的空间，因此移动元素会导致它覆盖其他框*/
}
/*中间*/
#center{
width:100%;
height:600px;
background-color:#F00;
}
#left{
width:200px;
height:600px;
background-color:#FF0;
margin-right:-100%;/*没有这个的话，他的右边部分就会掉下来*/
right:200px;
}
#right{
width:150px;
height:600px;
background-color:#093;
margin-right:-150px;/*没有这个他就会掉下来*/
}
#footer{
display:block;
margin:4px;
padding:5px;
min-height:100px;
border:1px solid #306;
background-color:#336;
clear:both;
}
</style>