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

解決済

質問者：biwanoha
質問日時：2008/08/06 00:51
回答数：2件

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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： cyokodog
回答日時：2008/08/06 10:15

<!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

- 0
- 件

通報する

No.2

回答者： 0wl
回答日時：2008/08/06 12:15

bodyのcssにありえない大きな値

width:2000pxとかどうでしょう？

ちょっと用語のアドバイスを
左右のはずが、下に行くことをｃｓｓでは
「落っこちる」
と表現します。
「回り込む」とは別の意味に取られる増すので、少し用語も勉強されたほうがいいと思います。

それと、固定レイアウト・リキッドレイアウトなどを扱ったテンプレートや段組の解説をしているサイトを捜すと理解がかなりすすむと思います。

ｃｓｓを聞きたいと思うのですが、ｃｓｓだけだされても、あぁこの人まるでｈｔｍｌとｃｓｓの関係がわかっていない、基礎も出来ていない人なんだくらいしかわかりません。今これを解決しても、すぐ別のことに行き詰まりますよ。まずは、基本的なことを勉強されることをお奨めします。