第一种方法：左右两边绝对定位
html代码
<div class="left"></div> <div class="middle"></div> <div class="right"></div>
css代码
.left { height: 200px; width: 300px; background-color: blue; position: absolute; left: 0; top:0 } .right { width:300px; height: 200px; background-color: red; position: absolute; right: 0; top:0; } .middle{ height: 300px; background-color: yellow; margin: 0 300px; }
第二种方法：可以利用浮动，左边的左浮动，右边的右浮动
css部分
#left { width: 100px; float: left; background: green; height: 300px; } #right { width: 100px; float: right; background: red; height: 300px; } #middle { margin-right: 110px; margin-left: 110px; height: 300px; background: #ccc; }
html部分;
<div id="left"> </div> <div id="right"> </div> <div id="middle"> </div>
第三种方法：这种方法是在实际的网站中应用的最多的，我个人感觉多少有些跟风的嫌疑。此方法很难用一句话概括。首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。
css：
.fl{ float: left; } .main{ color: #fff; } .center{ background: #9A0069; width: 100%; height: 300px; } .center .content{ padding: 0 100px; } .left{ width: 100px; height: 300px; margin-left: -100%; background: #009A61; } .right{ width: 200px; height: 300px; background: #00529A; margin-left: -200px; }
html:
<div class="center fl"> <div class="content"> center </div> </div> <div class="left fl">left</div> <div class="right fl">right</div>
原文：http://www.cnblogs.com/myzy/p/6135047.html