ベストアンサー

CSSで画面サイズを縮小するとレイアウトが大きく崩れてしまう

2008/08/06 00:51

CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更（縮小）すると右側のBOXがすべて左側の下に回り込んでしまいます。できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか？ frameとかだと*で対応するみたいなんですが・・・ひとまず、周り込を回避する方法が優先です。どうかよろしくお願いいたします。 @charset "shift_jis"; body { margin: 0px; height: 100%; padding: 0px; font-size: 12px; line-height: 150%; } html { height: 100%; } img { border: none; vertical-align: bottom; } #left { background-color: #666666; width: 350px; float: left; min-height: 100%; height: 100%; } #right { height: 100%; padding: 35px 0 0 0; min-height: 100%; width: auto; margin: 0 0 0 350px; }

biwanoha
お礼率24% (109/450)

HTML
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

cyokodog
ベストアンサー率56% (13/23)

2008/08/06 10:15 回答No.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <style> /* left[liquid] right[fixed] */ body { overflow: hidden; zoom: 1; } #left { float: left; width: 100%; overflow: hidden; zoom: 1; } #left div.contents { margin-right: 240px; } #right { float: right; width: 240px; margin-left: -240px; overflow: hidden; zoom: 1; } /* your design */ body{ margin:0; width:100%; height:100%; } #left{ background: #eee; height:100%; } #right { background: #ccc; height:100%; } </style> <body> <div id="left"> <div class="contents"> text text text text text text text text text text text text text text </div> </div> <div id="right"> text text text text text text text text text text text text text text </div> </body> </html> こんな感じでどうでしょう？サブコンテンツ固定のメインコンテンツ可変のレイアウトです。（注：IE6とFirefox2.0でしか確認してません）最近ブログに同じような記事を書いたので、よろしかったら参考にしてみてください。簡単にCSSレイアウトできるフレームワークを考えてみる - Cyokodog::Diary http://d.hatena.ne.jp/cyokodog/20080731/1217496357 サブコンテンツ固定・メインコンテンツ可変のCSSレイアウト - Cyokodog::Diary http://d.hatena.ne.jp/cyokodog/20080805/1217955315

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

0wl
ベストアンサー率43% (10/23)

2008/08/06 12:15 回答No.2

bodyのcssにありえない大きな値 width:2000pxとかどうでしょう？ちょっと用語のアドバイスを左右のはずが、下に行くことをｃｓｓでは「落っこちる」と表現します。「回り込む」とは別の意味に取られる増すので、少し用語も勉強されたほうがいいと思います。それと、固定レイアウト・リキッドレイアウトなどを扱ったテンプレートや段組の解説をしているサイトを捜すと理解がかなりすすむと思います。ｃｓｓを聞きたいと思うのですが、ｃｓｓだけだされても、あぁこの人まるでｈｔｍｌとｃｓｓの関係がわかっていない、基礎も出来ていない人なんだくらいしかわかりません。今これを解決しても、すぐ別のことに行き詰まりますよ。まずは、基本的なことを勉強されることをお奨めします。

ログインすると、全ての回答が全文表示されます。