兩列布局方案

一、float+margin

    <div id="content">
     <div id="aside">側邊欄固定寬度</div>
     <div id="main">主內容欄自適應寬度</div>

    </div>

#content{
width:100%;
height:100%;
overflow:hidden;
}
#main{
width:100;
float:left;
margin-left|right:210px;
}
#aside{
width:200px;
float:left|right;
}

優點：
可任意調換位置
父元素自適應高度
缺點：
不支持主內容優先顯示
二、absolute+margin

<div id="content">
    <div id="main">主內容欄自適應寬度</div>
    <div id="aside">側邊欄固定寬度</div>
</div>
#content{
    position:relative;
}
#aside{
    width:200px;
    position:absolute;
    top:0;
    left|right:0;
}
#main{
    margin-left|right:210px; /*參考側邊固定寬度*/
}
優點：
可任意調換位置
可主內容優先顯示
缺點：
側邊無法撐開父元素的高度，會溢出父元素區域。

三、float+-margin

<div id="content">
    <div id="main">主內容欄自適應寬度</div>
    <div id="aside">側邊欄固定寬度</div>
</div>
/*左定*/
#content{
    overflow:hidden;
    padding-left:210px; /*參考側邊固定寬度*/
}
#main{
width:100%;
    float:left;
}
#aside{
width:200px;
float:left;
position:relative;
    left:-210px;/*等於包含塊內補白*/
margin-left:-100%;
}
/*右定*/
#content{
    overflow:hidden;
    padding-right:210px; /*參考側邊固定寬度*/
}
#aside{
width:200px;
float:left;
position:relative;
    right:-210px; /*等於包含塊內補白*/
    margin-left:-200px;
}