方案1

<style type="text/css">
     #main {min-width:60px;min-height:600px; background:#FEFF0A;padding-left:300px;}
     #main-left {margin-left:-300px;width:300px;min-height:400px;background:#98FF1A;}
     #main-right {min-height:400px;background:#7CC0FF;}
     .float {float:left;}
     .clear{clear:both: height : 0; line-height:0; font-size:0;}
</style>
<div id="main">
     <div id="main-left"  class="float">
            這個是左邊部分，寬度確定
     </div>
     <div id="main-right">
            這個是右邊部分，寬度自動擴充套件
     </div>
     <div class="clear"></div>
</div>
 

父元素padding-left:300px;則浮動元素後，每行給子元素的寬度為 父元素寬度-300px;
這時讓左側元素寬度為300px,並且設定外面距為-300px,則左側塊的左邊距與父元素左邊距重合了。
右側元素寬度百分之百自適應父元素寬度。

方案2

樣式

#mainContent {
    min-height: 200px;
    padding: 0px 0px 10px 0;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    float: left;
    margin-left: -22em;
    width: 100%;
}

#mainContent .forFlow {
    margin-left: 22em;
    float: none;
    width: auto;
}

#sideBar {
    width: 230px;
    min-height: 200px;
    padding: 0px 0 0px 20px;
    float: left;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
 

HTML程式碼

<div id="mainContent">
    <div class="forFlow">
    </div>
    <div id="sideBar">
    </div>
</div>

注意margin-left:-22em;

方案3

聖盃和雙飛翼佈局
https://github.com/rccoder/blog/issues/6

<div class="head">head</div>
    <div class="content">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
<div class="foot">foot</div>
 

聖盃主要思想

.left, .right, .main {
    float: left;
}
.left {
    width: 40px;
    height: 60px;
    background-color: #B9E078;
    margin-left: -100%;
}
.right {
    width: 60px;
    height: 80px;
    background-color: #FF9900;
    margin-left: -60px;
}
.main {
    background-color: crimson;
    width: 100%;
}
.content {
    padding: 0 60px 0 40px;
}

關鍵點1：

main, left, right 我們都可以看做是在一個浮動流中，依次的順序也是 main left right。目前是因為 main 佔了100% 從而導致 left 與 right 不能和 main 浮在同一行了，這個時候我們可以利用負邊距來讓 left 向前移動 （即 margin-left 為正的時候就是和左邊的盒子的外邊距，那麼為負的時候就是像前移動了）。

關鍵點2：

給content一個內邊距，這樣就不會出現left和main，以及right和main的重疊了

雙飛翼佈局主要思想

<div class="head">head</div>
    <div class="content cleanfix">
        <div class="main">
            <div class="wrap">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
<div class="foot">foot</div>

雙飛翼佈局和聖盃佈局很像，區別是在 main 裡面再新增一個 div, 然後對這個 div 進行 margin-left 和 margin-right，而不是給conten一個padding。

.wrap {
    background-color: darkmagenta;
    margin-left: 40px;
    margin-right: 60px;
}