网页常见的布局有一般一栏、两栏、三栏现在从一栏说起：
css:
<style type="text/css">
.container{background: #87cbe5;height: 700px;width:500px;/*margin:0px auto;*/margin-left: auto;margin-right: auto;}
</style>
大家都知道一框架居中margin:0px auto;和margin-left: auto;margin-right: auto;都是可以（大家可以看看bootstrap框架一般用的后免得方法）
html：
<div class="container"></div>
两栏：
css:
<style type="text/css">
*{margin:0;padding:0;}
html.body{margin:0;height:100%;}
.container{width: 100%;background: #87cbe5;height: 700px;/*margin:0px auto;*/margin-left: auto;margin-right: auto;}
.container-left{width: 20%;background: #b79be7;height: 600px;float: left;}
.container-right{width: 80%;background: #ff7d73;height: 600px;float: right;}
</style>
html:
<div class="container">
<div class="container-left"></div>
<div class="container-right"></div>
</div>
一般从学习的时候别人就跟我们说里面的框架container-left和container-right宽度和是不能大于外面container框架，的确是如此!然后我们每每都是小心翼翼的遵守，但是有没有想过大于它的话要怎么才能不会错位捏，这时候用到了margin-left属性可以设置为负值。.container-right改为下面
.container-right{width: 85%;background: #ff7d73;height: 600px;float: right;margin-left: -5%;}
三栏：（margin负值法以及自身浮动法，绝对定位法三种方法）
上面两栏引出此方法margin负值法：
<style type="text/css">
/* html,body{margin:0;height:100%;}
.left,.right{position: absolute;top: 0px;width: 200px;height: 100%;}
.left{left:0;background: #b79be7;}
.right{right: 0;background: #ff7d73;}
.center{margin:0 210px;background: #87cbe5;height:100%;}*/
html,body{margin:0;height:100%;}
.main{width: 100%;height: 100%;float: left;}
.main .center{margin:0 210px;background: #87cbe5;height:100%;}
.left,.right{width: 200px;height:100%;float: left;background: #b79be7;}
.left{margin-left: -100%;}
.right{margin-left: -200px;}
</style>
<div class="main">
<div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
第二种：
<style type="text/css">
html,body{margin:0;height:100%;}
.left,.right{position: absolute;top: 0px;width: 200px;height: 100%;}
.left{left:0;background: #b79be7;}
.right{right: 0;background: #ff7d73;}
.center{margin:0 210px;background: #87cbe5;height:100%;}
</style>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
第三种：
<style type="text/css">
/* html,body{margin:0;height:100%;}
.left,.right{position: absolute;top: 0px;width: 200px;height: 100%;}
.left{left:0;background: #b79be7;}
.right{right: 0;background: #ff7d73;}
.center{margin:0 210px;background: #87cbe5;height:100%;}*/
html,body{margin:0;height:100%;}
.center{height: 100%;margin:0 310px;background: #87cbe5;}
.left,.right{width: 300px;height:100%;background: #b79be7;}
.left{float: left;}
.right{float: right;}
</style>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
关键的是把中间的放在最后
详文见http://www.zhangxinxu.com/wordpress/?p=370