利用可能な水平スペースを埋めるために2つのdiv要素をどのように伸ばすのですか？

Question

私が本当に助けてくれることを願っています。

私は何をしようとしているかを示すためにthis fiddleを作成しました。

私の質問は、利用可能な水平スペースを埋めるために2つのdiv要素をどのように伸ばすのですか？

5つのdiv要素がつながっていて、background-colorとwidthを100％に設定したdiv要素で囲まれています。

幅が50pxの3つのdiv要素があります。

他の2つのdiv要素の幅は、残りの空き領域までを埋める必要があります。両方のdivごとに50％を超えて同じ幅にする必要があります。

私の問題は、両方のdiv要素の合計が100％の合計幅になることです。空きスペースの幅ではありません。私はテーブルを使用しないようにしようとしている

など

不明確なものがあれば、私に教えてください。

編集：私はあなたができると思ういけない I'd like to hear your comments about this way.

Answer 1

これを解決する1つの方法はであり、このような変更divタグあなたのdivsをテーブルのセルのように扱います。テーブルのユニークなプロパティは、セルの幅に関係なく、セルの幅がテーブルの幅を埋めることです。いくつかのセルに幅を与えることによって、他のセルは残りのスペースを埋めるでしょう。 display:tableとdisplay:table-cellを使用すると、htmlを変更せずにこれを利用できます。この例を見て：

http://jsfiddle.net/GyxWm/

私はこれをテストしていませんでしたが、それはすべての「現在」のブラウザで動作するはずです。それはIE8 +で動作するはずですが、おそらくIE7では動作せず、IE6では動作しません。

Answer 2

怖いです。

float:left;は、含まれているdivからコードを削除し、すべての要素が隣り合うようになります。要素が画面を右に離れると、スペースを残して折り返されます（相対位置付けのように少しあります）。

また、固定幅と可変幅を比較しようとしていますが、これは不可能に近いものです。 http://jsfiddle.net/P5Kjh/5/

まず、私は2つのdiv要素に戻ってあなたのコードを削減し、作業することを得た：あなたはここで見てみる場合は

。

backgroundGクラスにoverflow:hiddenを追加して、灰色の背景があり、両方のdivが左に浮かんでいることを確認しました。

次に、幅を設定します。各要素に境界線を追加すると、累積合計は約100％になります。小さいパーセンテージで作業する必要があります。

次に、新しいbackgroundG要素にもう一方の3を追加し、fillup要素のseparteクラスを作成して、80％（境界なし）にします。

多分あなたを助けてくれません。ごめんなさい。

乾杯

Answer 3

あなたはjavascriptの助けを借りてそれをすることができます。
<div id="part1" class="sectionFillUp">section2</div>
<div id="part2" class="sectionFillUp">section4</div>

そして、それらのタグの後にこのJavaScript somehwereを追加します：

    var elem1 = document.getElementById("part1"); 
    elem1.style.width = (screen.width - 150)/2; 
    var elem2 = document.getElementById("part2"); 
    elem2.style.width = (screen.width - 150)/2; 

そしてsectionFillUpからwidth:50%;を削除CSSの