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; background-color:#FF9900}
#main{ width:auto;background:#00FF00;margin:0 220px;}
#right{ width:200px;margin-left:-200px; float:right; background-color:#CCCC00}
左右設置後，使用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>