フローティングディビジョンの幅

Question

私は2つのフローティングディビジョンを持っています。
最初のdivは100px幅に、もう1つのdivの幅は残りの部分にしたいと思います。次のようなものがあります。

<div style="float:right;width:100px;height:100px;background:black;"></div> 
<div style="float:left;width:100%;height:100px;background:yellow;"></div> 

ここはjsfiddleです。

1つのルールがあります。ページの幅はわかりません！

Answer 1

float:left;width:100%;を2番目のdivから削除すると、その方法でうまくいくはずです。ブロックが右にフローティングされると、フローティングされていないオブジェクトがフローされます。 heightを2つのブロックで同じに設定しているので、うまく整列します。

jsfiddleを更新して、この動作の仕組みを表示しました。

Answer 2

浮動小数点のdivは、その内容に基づいて幅を占有します。それ以外の場合は、両方のdivのコンテナに基づいて幅を指定する必要があります。

<div style="float:right;width:100px;height:100px;background:black;"></div> 
<div style="float:left;height:100px;background:yellow;">It will occupy space 
    based on contents</div> 

または親コンテナによってそれを行う...

<div style="width: 400px;"> 
    <div style="float:right;width:100px;height:100px;background:black;"></div> 
    <div style="float:left;width:300px;height:100px;background:yellow;"></div> 
</div> 

Answer 3

これは、彼らがそれを昔を作った方法です）

<style> 
#content { width:auto; height:auto; padding:10px 10px 10px 105px; position:relative; float:left; } 
#content #column { position:absolute; top:0; left:0; padding:10px 5px 10px 10px; width:100px; } 
</style> 

<div id="content"> 
    <div id="column">Right part</div> 
    Left part 
</div> 

申し訳ありませんが、ためにレイアウトを作っていませんあなたがEI6をサポートする必要がないときには簡単かもしれません）しかし、浮動小数点ブロックとは違って、絶対にの解像度を保証する必要があります。