CSS 3の列レイアウトの問題

Question

私は現在取り組んでいる3つの列のレイアウトにいくつかの問題があります。私はレイアウトをうまく作成することができますが、私はアイロンをかける必要があるいくつかの小さな問題があります。

HTML

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

CSS

.col1 
{ 
    float: left; 
} 
.col2 
{ 
    float: left; 
} 
.col3 
{ 
    float: right; 
} 
.col1, 
.col3 
{ 
    width: 100px; 
} 

私の最初の問題は、列1および3は、幅が固定されていることであると私は間のギャップを埋めるために展開する中央の列を必要としますそのうち2つ私は私の人生のためにこれを行う方法を理解することはできません。私は絶対的な配置を使用してこれを達成することができますが、私の次の問題にうまくいきます...

ブラウザがリサイズされると、互いに下にきちんとラップする必要があります。

何か助けや指針をいただければ幸いです。理想的には、私はできるだけ小さなハッキングとjavascriptでこれを行うようにしたいと思います。 http://jsfiddle.net/BCJ6C/6/

乾杯：

は、ここで私はと遊ぶために始めましたフィドルです！

Answer 1

はここだけ中央の列をフロート状態にしないでください、あなたのfiddle, updated

です。悪い点は、ソースの順序で列1と列3の下に移動する必要があることです。これは問題ではないことを願っています。

Answer 2

私は、これはyoureのを探して何だと思う： http://matthewjamestaylor.com/blog/holy-grail-liquid-layout-no-quirks-mode

編集：URLを変更しました。誤ってこの最初の古いバージョンを投稿しました