スタイルシート float

スタイルシートを使って左右分割のページを作ろうと思っています。

#left{
width:170px;
float:left;
}

#right{
float:right;
}

としたところ、
ブラウザ（IEです）を余裕を持たせているときは正常表示されますが、

左画面　｜　右画面

ウインドウ幅を狭くすると、

右側にくる部分が、画面上に、
左側にくる部分が、画面下に、

右画面
--------
左画面

上下に分割された画面となってしまいます。

これを、ウインドウ幅を狭くしても
左右分割に保つようにするにはどうしたら良いのでしょうか？

No.2 ベストアンサー 回答者： noname#31047 回答日時： 2007/05/24 18:43

CSS Sample:

#left{
width:170px;
position:absolute;
}

#right{
padding-left:170px;
}

この回答へのお礼

その通りにしましたが、あまりかわりませんでした。

　　　　右画面
　　　　右画面
　　　　右画面
-------
左画面
左画面
左画面

という感じになってしまいます。


#left{
width:170px;
position:absolute;
}

#right{
padding-left:170px;
position:absolute;
}


としたらうまくいきました。
どうもありがとうございました。

お礼日時：2007/05/25 09:30

No.1 回答者： is_may 回答日時： 2007/05/24 17:40

スタイルシートに

#wrap {
width:700px;
}

を追加し、二つのボックスを囲めばずれなくなります。
↑の横幅は必要に応じて調節してください。

<div id="wrap">
<div id="left">メニュー</div>
<div id="right">本文</div>
</div>

この回答へのお礼

widthを指定してしまうという手もあるんですね。

そうすると、ウインドウ幅を定めた幅より小さくしたときに
画面全体が表示されませんよね？？

できることなら伸縮する？
もし見てくれる人がいたなら、
その人が好きな幅でブラウザを開いて欲しいです。

どうもありがとうございました。

お礼日時：2007/05/25 09:28