固定幅のフローティング div で構成される 2 列のレイアウトがあります。最初の列の内側には、幅の広い要素があります。したがって、html レイアウトは次のようになります。
<div id="container">
<div id="column1">
...short content...
<div id="extra-wide">
...wide content...
</div>
</div>
<div id="column2">
...long content...
</div>
</div>
注釈が付けられているように、最初の列には短い量のコンテンツが含まれ、2 番目の列には長い量のコンテンツが含まれています。CSS は次のようになります。
#column1 { width: 200px; }
#column2 { width: 100px; }
#extra-wide { width: 250px; }
したがって、非常に幅の広い要素は、実際にはその親である column1 よりも幅が広くなっています。また、事前にどの要素の高さもわかりません。それらはすべて可変です。
ここでの問題は、column2 が column1 の非常に幅の広い要素の上に重なって表示されることです。これを視覚化するのに役立つ jsfiddle があります: http://jsfiddle.net/e3KNg/ (このフィドルには、何が起こっているかをより明確にするために、いくつかのコンテンツが挿入され、色が追加されています) スクリーンショットは次のとおりです。
基本的な HTML 構造または 3 つの要素の幅を変更せずに、(Javascript を使用せずに) column1 の幅の広い要素を column2 の下に強制的に表示することはできますか? これが私が達成しようとしている効果です:
これは、html 要素を再配置するか、Javascript を使用することで実行できることはわかっていますが、上記の制約内で解決策を探しています。さまざまな場所で div をクリアしたり、フロートを削除または調整したり、オーバーフロー設定を試したりしてみましたが、探していた効果を得ることができませんでした。