三栏布局的三种方法（左右两栏固定宽度）
1、绝对定位
<body>
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</body>
html,body{margin:0; height:100%;}
#left,#right{position:absolute; top:0; width:200px; height:100%;}
#left{left:0; background:#a0b3d6;}
#right{right:0; background:#a0b3d6;}
#main{margin:0 210px; background:#ffe6b8; height:100%;}
注意：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。然而，一般情况下，除非用户显示器分辨率宽度>=1600像素，否则用户不会把浏览器缩小到1000像素以下的
2、浮动配合负边距
<style>
html,body{margin:0; height:100%;}
#main{width:100%; height:100%; float:left;}
#main #body{margin:0 210px; background:#ffe6b8; height:100%;}
#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
#left{margin-left:-100%;}
#right{margin-left:-200px;}
</style>
<body>
<div id="main">
<div id="body"></div>
</div>
<div id="left"></div>
<div id="right"></div>
</body>
注意：中间部分必须在第一个。左右两边的固定栏位置随意
3、自身浮动
<style>
html,body{margin:0; height:100%;}
#main{height:100%; margin:0 210px; background:#ffe6b8;}
#left,#right{width:200px; height:100%; background:#a0b3d6;}
#left{float:left;}
#right{float:right;}
</style>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
注意：主体一定要在最后
下插曲：无意间看到的小技巧——
问：当容器宽度大于显示器最大分辨率时，如何使容器居中。如：容器宽度：1920，屏幕分辨率：1440.
答：容器{position:absolut;left：50%，margin-left:-960px}
