左右两边宽度固定，中间自适应
第一种方法：左右两边绝对定位
html代码
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:0300px;
}
第二种方法：可以利用浮动，左边的左浮动，右边的右浮动
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宽度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:0100px;
}
.left{
width: 100px;
height: 300px;
margin-left: -100%;
background: #009A61;
}
.right{
width: 200px;
height: 300px;
background: #00529A;
margin-left: -200px;
}
html:
center left right