html代码：
<div id="left">左边栏</div>
<div id="right">右边栏</div>
<div id="main">主内容</div>
方法一：利用绝对定位方法(不推荐)
css部分：
body {margin: 0;padding: 0; height: 100%;}
#left,#right {position: absolute; top:0; width: 220px; height: 100%;background:pink;}
#left {left: 0;}
#right { right:0;}
#main {margin: 0 230px; height: 100%;}
这种方法是最简单，也是麻烦最多的，如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。
方法二：采用的是浮动布局
css部分：
#left,#right { float: left; width: 220px; height: 200px; background: blue;}
#right { float: right;}
#main { margin: 0 230px;background: red; height: 200px;}
这种方法我利用的就是浮动原理，左右定宽度分别进行左浮动和右浮动，此时主内容列（中间列没有定度）主会自动插入到左右两列的中间，最要注意的一点是，中间列一定要放在左右两列的后面
方法三：margin方法
css部分：
#left{ width:200px; float:left;margin-right:-200px; color: rgb(51, 51, 51); line-height: 25.2000007629395px;">#main{ width:auto;background:#00FF00;margin:0 220px;}
#right{ width:200px;margin-left:-200px; float:right; color: rgb(51, 51, 51); line-height: 25.2000007629395px;">左右设置后，使用margin
方法四：个人感觉最简单方法：
css部分：
#left{ width:200px; float:left;}
#mid{ width:auto;}
#right{ width:200px; float:right;}
中间使用width:auto;左右分别左右浮动
方法五：实现中间栏优先加载（重要部分优先加载）
html部分：
<div class="main-2">
<div class="main-wrap-2">main-wrap</div>
</div>
<div class="sub-2">sub</div>
<div class="extra-2">extra</div>
css部分：
.main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}
.main-wrap-2{ margin:0 200px 0 150px; }
.sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}
.extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}
优先加载关键在于重要内容在html里面必须在前面，所有main部分移到了最上面
较完整内容可以参考——双飞翼布局：
<style type="text/css">
*{ margin:0; padding:0px;}
.header{ background:#666; text-align:center;}
.body{ overflow:hidden;*zoom:1;}
.wrap-2{ margin-top:30px;}
.wrap-2 .main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}
.wrap-2 .main-wrap-2{ margin:0 200px 0 150px; }
.wrap-2 .sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}
.wrap-2 .extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}
.footer{ background:#666; text-align:center;}
</style>
<div class="wrap-2">
<div class="header">Header</div>
<div class="body">
<div class="main-2"><div class="main-wrap-2"><p>main-wrap</p><p>main-wrap</p></div></div>
<div class="sub-2"><p>sub</p><p>sub</p><p>sub</p></div>
<div class="extra-2"><p>extra</p><p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p></div>
</div>
<div class="footer">Footer</div>
</div>
方法六：中间栏优先加载，采用css3 方法：
[html]<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自适应宽度，左右两栏固定宽度，中间栏优先加载</title>
<style>
.container{
display:-moz-box;
display:-webkit-box;
}
div{
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.sider_l{
width:250px;
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
background:limegreen;
}
.middle_content{
-moz-box-flex:1;
-webkit-box-flex:1;
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
background:lightpink;
}
.sider_r{
width:250px;
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
background:green;
}
</style>
</head>
<body>
<div class="container">
<div class="middle_content">优先加载主内容区</div>
<div class="sider_l">左边栏</div>
<div class="sider_r">右边栏</div>
</div>
</body>
</html>
[/html]
方法七：中间栏优先加载position:absolute方法
<style type="text/css">
html,body{width:100%;height:100%;margin:0;padding:0;}
.content{width:100%;height:100%;position:relative;background:#CFF;overflow:hidden;}
.left{width:200px;height:100%;background:#0F0;position:absolute;z-index:1001;top:0;left:0;}
.center-ct{height:100%;background:#60F;position:absolute;z-index:900;top:0;left:0;margin:0;width:100%;}
.center{margin:0 200px;}
.right{width:200px;height:100%;background:#FF0;position:absolute;z-index:1000;right:0;top:0;}
</style>
</head>
<body>
<div class="content">
<div class="center-ct">
<div class="center">
center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>