css - 最後の div の空きスペースを埋める

Question

メイン div に 4 つの div があります。すべてが左に浮かんでいて、最後の 1 つは空のスペースを残します。そのスペースを最後の div (全幅) で埋めたいと思います。

http://jsfiddle.net/jZpWf/26/

<div id="container">
    <div class="col1">
    </div>
    <div class="col2">
    </div>
    <div class="col3">
    </div>    
    <div class="col4">
    </div>    
</div>

#container {
    width: 600px;
    height: 200px;
    background:yellow;
}
.col1 {
    float:left;
    width:90px;
    height: 200px;
    background:red;
}
.col2 {
    float:left;
    width:130px;
    background:blue;
height: 200px;    
}
.col3 {
    float:left;
    width:130px;
    background:red;
    height: 200px;
}
.col4 {
    float:left;
    width:130px;
    background:blue;
    height: 200px;
}

Answer 1

左に浮かせずに 100% にして、残りのスペースをすべて埋めます。

.col4 {
    background:blue;
    height: 200px;
}

デモを試す

Answer 2

.col4 {
    float:left;
    width: 250px;
    background:blue;
    height: 200px;
}

簡単な答え、すぐに良いもの...

より良いもの、jfiddle

Answer 3

div の幅の合計は、使用可能な合計サイズに対応しないため、合計領域を占有しないでください。これは、パーセンテージ メソッドまたは CSS3 calc を使用して行うことができます

.col4 のサイズ変更

.col4 {
    float:left;
    width:250px;
    background:blue;
    height: 200px;
}

また

CSS3でCol4を計算する

.col4 {
    float:left;
    width: calc(100% - 350px);
    background:blue;
    height: 200px;
}