スペースがないときに浮動小数点数を強制的にリサイズするのではなく、浮動小数点数を浮動小数点以下の表の下に移動するにはどうすればよいですか？

Question

私は、次のようなレイアウトを持っている：

<div style="float:right ...">Contents</div> 
<table>contents</table> 

私はサイド・バイ・サイドの両方の要素を表示するためにはスペースがありません時にdiv要素がテーブルの下に移動することを望みます。どうやってやるの？現在重複しています。

EDIT：

これは私がレイアウトに任意の幅をコーディング避けたいので、テンプレートです。 divとテーブルの内容に基づいてサイズを変更し、を指定してからをdiv、side-by-sideまたはtableの上に配置する方法を決定します。基本的に私は何かのようなものを探していますmin-width: <content width request>

Answer 1

display:inline;を使用してテーブルを解決しました。フローティングエレメントがブロックタイプのコンテンツと重複することが最優先されるように見えますが、これは簡単には削除できません。

Answer 2

私はあなたの質問を理解している場合は、jsFiddleのように最大幅のCSSプロパティを使用したいと思います。

Answer 3

<div>と<table>要素のデフォルトの幅は自由ですが、複数の方法で変更することができます。

は基本的に、彼らは最終的にコンテナの「広すぎ」であるためには、あなたは彼らにMIN-幅指定与える必要があり、そう何かのよう...

div { min-width: 300px; } 
table { min-width: 500px; } /* or whatever numbers make the most sense */ 

次へそれらを持っているでしょう（500px + 300px）のいずれかの容器に入れておきますが、幅が狭すぎるとスタックします（一緒に並べると幅が広すぎるため）。

float: right;が正しく見えます。しかし、あなたが探している振る舞いを確実にするために、<div>と<table>の両方に追加することには害はありません。

Answer 4

おそらくCSSの位置をrelativeの方法で調べる必要があります。たぶんthis linkがお手伝いします。