###前提・実現したいこと
CSS でホームページの画面を作成しております。
ウィンドウの幅を狭くしたときに、Floatを使っていても、右側のカラムが下に落ちずに、そのまま隠れてくれるようにしたいです。
###発生している問題・エラーメッセージ
Chromeなどの普通のブラウザでは、widthを設定して、overflow:hiddenを指定すれば、ウィンドウ幅を狭くしたときも形が崩れず上手く隠れてくれましたが、IE6に対応させる際に、IE6ではoverflow:hiddenが効かないようでした。
そして、ウィンドウ幅を狭くすると、右側のカラムが下へ落ちてしまいます。
IE6でfloatを使っても形が崩れないようにするにはどうしたらよいでしょうか。
ソースコードを、簡易なもので作ってみました。現段階ですと、ウィンドウを縮めると、ie6ではボックスが上下にずれてしまいますが、それをウィンドウに隠れて見えなくし、形が崩れないようにしたいです。
###該当のソースコード
``<html> <head> <style> .container{ background-color:#696969; overflow:hidden; } .sideber{ background-color:#3cb371; width:300px; float:left; } .contents{ background-color:#dcdcdc; width:300px; froat:right; } </style> </head> <body> <div class="container"> <div class="sideber"> テキスト </div> <div class="contents"> フロート </div> </div> </body> </html>
###試したこと
ネットで検索して出てきたので、position:relativeやdisplay:inline-blockを書き足してみましたが、特に何も反応がありませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
ご回答をいただいたソースで実際に動きましたが、Container を二重にして、中にwidthをつけるだけで上手く隠れるのは何故なのかがよくわからず、どのような発想に基づいているのかが知りたいです。
また、overflow :hiddenはなぜ2つ付けるのでしょうか。
今後のために考え方などを教えていただけるとありがたいです。
回答2件
あなたの回答
tips
プレビュー