学会一种新的布局方式：
1、
<style>
body{ margin:0; padding:0;}
.main{ 960px; margin:0 auto;}
.center{ float:left; border:1px solid blue; 100%;}
.render{ margin:0 210px; border:1px solid #966;height:200px;}
.left{ float:left; border:1px solid black; height:200px; 200px; overflow:visible; margin-left:-100%;}
.right{ float:left; border:1px solid black; height:200px; 200px; overflow:visible; margin-left:-202px;}
.clr{ zoom:1;}
.clr:after{ display:block; content:""; clear:both;}
</style>
</head>
<body>
<div class="main clr">
<div class="center">
<div class="render">
</div>
</div>
<div class="left" style="background:blue;"></div>
<div class="right" style="background:red;"></div>
</div>
</body>
2、
<style>
body{ margin:0; padding:0;}
.main{ 760px; margin:0 auto;}
.center{ float:left; border:1px solid blue; 100%;}
.render{ margin-left:210px; border:1px solid #966;height:200px;}
.left{ float:left; border:1px solid black; height:200px; 200px; overflow:visible; margin-left:-100%;}
.clr{ zoom:1;}
.clr:after{ display:block; content:""; clear:both;}
</style>
</head>
<body>
<div class="main clr">
<div class="center">
<div class="render">
</div>
</div>
<div class="left" style="background:blue;"></div>
</div>
</body>
*最后才发现在ie6下 左边是不显示的， 然后在最外边又套了一个div，.main上的宽度去掉并添加到外面的div上，然后就正常显示~