画面を縮小するとカラムが落ちます・・・。

質問

現在CSSで2カラム構成のサイトを作成しています。

左メイン、右サイドバーと言った感じです。
ただ、ブラウザの画面を小さくしていくと、右のサードバーが隠れずそのまま下に落ちてしまいます。

いずれもpx単位で定義しています・・・。

画面の縮小を行ってもカラム落ちしないように、強制的にそこにとどまらせる方法はありませんでしょうか？また、カラムが落ちることに関して、何か予測される原因などが御座いましたら、アドバイスいただけますと幸いです。

どうぞ、宜しくお願いいたします。

回答No.4

suusanndesu

フロートは全く関係ないと思うのですが。。

親要素とfloatする要素にwidthの設定などしていますか？
とくに、floatさせる要素にはwidthの設定は必須です。
cssて凡ミスが多いと思います。

回答No.3

4017B

とりあえずこういう考え方で…

div.body { width: 800px; overflow: hidden; }
div.main { width: 600px; float: left; }
div.sidebar { width: 200px; float: right; }

<div class="body">
<div class="main">…</div>
<div class="sidebar">…</div>
</div>

全体を div で囲ってやり、そこに overflow: hidden; を指定すれば、ウィンドウサイズが小さくなった時はカラム落ちせずに、はみ出る部分がきれいに画面外に出てくれます。

細かい微調整は自力でやって下さい。

回答No.2

ORUKA1951

そもそも、原因はブロックを配置するためにfloatを使うからです。
floatは、文中の挿絵などの周囲に本文を回り込ませるためですから、floatされるブロックと流し込まれるブロックを足したサイズが、ウィンドウ巾より狭くなれば回りこみが解除されるのは当然です。
　言い換えれば、ウィンドウの幅が狭いときは回り込みを解除して下側に表示させるためにfloatで配置したのではないですか？

　floatを使わず、absoluteで配置するか、
　floatを使うなら横幅を固定しないか、親ブロックの巾を決めてしまう(この場合、狭いウィンドウでは横スクロールを強制される)かです。

　本文と、右サイドバーの内容はどちらがいつも大きいかなどがわかっている場合は、それも教えてください。

回答No.1

・真 綾・（@Ma-yan_bh1011）

ちゃんと「カラム落ち」で検索しました？

＞原因
floatしてるから

＞方法
コンテナのwidthを設定する