css - CSS - 流体列

Question

ここに私のコードがあります: http://jsfiddle.net/2Mtcq/。

中央の列を流動的にしたいのですが、左右の列を幅に設定します。中間液はどうやって作るの？次のようにしたい：

https://dl.dropboxusercontent.com/u/22358199/Screen%20Shot%202013-05-31%20at%2011.00.31%20AM.png

---

body {
    margin:10px;
}

#header {
    width:600px;
    background-color: #f0efee;
}


#main{
    width:600px;
}
#leftcol {
    background-color: #f0efee;
    float:left;
    margin: 10px 10px 10px 0;
    width:100px;
}
#midcol {
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
}
#rightcol {
    background-color: #FCF;
    float: left;
    margin: 10px 0 10px 0;
    width:100px;
}

#footer {
    width:600px;
    background-color: #f0efee;
    clear:both;
}

Answer 1

これを見て、これについて説明します：Div幅100％から固定量のピクセルを差し引いたもの

それはすべての詳細を説明します

私が見る最善の解決策calcは、そのリンクに記載されているように css を使用することです。

例: http://jsfiddle.net/2Mtcq/7/

#midcol {
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
    width: -moz-calc(100% - 220px);
    width: -webkit-calc(100% - 220px);
    width: calc(100% - 220px);

}

ブラウザでの calc のサポート: http://caniuse.com/calc

それを使用でき、最悪の場合は JS フォールバックがあります。