目前為止，我所熟知的左中右三欄寬度自適應於瀏覽器的方法有三個：絕對定位法，margin負值法以及自身浮動法。這些方法簡潔實用，且無兼容性問題。
一、絕對定位法：左右兩欄采用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。於是實現了三欄自適應布局。
首先需要三個div，將左右兩邊的div的position設置為absolute，左右設置為相等固定寬度，在這里設置為200px，並且左邊div的top值為0，left值為0，同理右邊top值為0，right值為0。然后設置中間div的樣式，將中間div的margin-left和margin-right設置為左右兩邊的固定寬200px。以下是簡單的布局：
<body>
<div id="main"></div>
<div id="left"></div>
<div id="right"></div>
</body>
下面就是關鍵的css代碼：
<style type="text/css">
#main {margin:0 200px;background:red;}
#left{position:absolute;top:0;left:0;width:200px;background:blue;height:100%;}
#right{position:absolute;top:0;right:0;width:200px;background:green;height:100%;}
</style>
這種方式三個div的順序可以任意改變。
此方法的優點在於：理解容易，上手簡單，受內部元素影響而破壞布局的概率低，就是比較經得起折騰。
缺點在於：如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。
二、自身浮動法：左欄左浮動，右欄右浮動，中間欄放最后。
以下是布局代碼：
<body>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</body>
下面是css樣式代碼：
<style type="text/css">
#main {margin:0 200px;background:red;}
#left{float:left;width:200px;background:blue;height:100%;}
#right{float:right;width:200px;background:green;height:100%;}
</style>
這種方式需要注意三個div的順序，左右兩欄的順序不分先后，但是中間一欄必須放在最后。
此方法的優點是：代碼足夠簡潔與高效
缺點是：中間主體存在克星，clear:both屬性。如果要使用此方法，需避免明顯的clear樣式。
三、margin負值法：左右兩欄均左浮動，左右兩欄采用負的margin值。中間欄被寬度為100%的浮動元素包起來。
下面是布局代碼：
<body>
<div id="main">
<div class="content"></div>
</div>
<div id="left"></div>
<div id="right"></div>
</body>
下面是css樣式代碼：
<style type="text/css">
#main {float:left;width:100%;}
.content {margin:0 200px;height:100%;background:red;}
#left{float:left;width:200px;margin-left:-100%;background:blue;}
#right{float:left;width:200px;margin-left:-200px;background:green;}
</style>
左右兩欄div的順序不分先后，但是主體部分div要放前面。
此方法的優點在於：三欄相互關聯，可謂真正意義上的自適應，有一定的抗性——布局不易受內部影響。
缺點在於：相對比較難理解些，上手不容易，代碼相對復雜。出現百分比寬度，過多的負值定位，如果出現布局的bug，排查不易。