ブラウザいっぱいに表示されるページが作成できません。

質問

ブラウザいっぱいに表示されるページを作成しようとしているのですが、上手くいきません。

3カラムのサイトで、左側メニュー、真ん中コンテンツ、右側メニューという感じにしようと思っています。
ブラウザのサイズに合わせて真ん中のコンテンツだけが伸び縮みするようにし、左側メニュー、右側メニューは固定したいと思っています。
イメージとしてはGIGAZINEのような感じです。
http://gigazine.net/

―HTMLソース
<div id="contents">
contents
</div>
<div id="right">
right menu
</div>
<div id="left">
left menu
</div>

―CSS
#contents {
float: right;
}
#right {
float: right;
}
#left {
float: left;
}

しかし、真ん中コンテンツは最小サイズは指定しても、最大サイズを指定することができないので、長い文章を書くとその分だけ広がってしまい、結果的に他のメニューが回り込みできなくなって下に移動してしまいます。

position:absolute;を使えば、好きな場所に配置することができるので、これを実現できるのですが、個人的にposition:absolute;はあまり良くないと聞いたことがあります。実際はどうなのでしょうか？
また、GIGAZINEのソースを見ていると、position:absolute;ではなく、position:relative;で相対的に配置しております。

今まで横幅が固定されたサイトしか作ってこなかったので、少し難しいです。アドバイスをお願いします。

回答No.2

cipher_roy

左右の端に位置するコンテンツ部分は具体的な数値（ピクセルでも％でも構わない）で
指定して真ん中部分は幅を何も指定しないでおくと、全体から左右の幅を
引いた部分として自動的に調整された幅が確保されます。

position:abusolute; を使うよりも、floatでleft/rightと左右のコンテンツ位置を
制御する方がブラウザ／バージョンによる差も出にくいですよ。

回答No.1

warez

カラムの長さを全て % 指定にするのが、手っ取り早く閲覧の支障も少ないと思います。カラム落ちも（ほとんど）発生しませんし。

#contents {
float: right;
width: 80%;
}
#right {
float: right;
width: 10%;
}
#left {
float: left;
width: 10%;
}

最大サイズは max-width で設定できますね。

お礼

アドバイスありがとうございます。
左右のサイドバーは固定したいと思っています。%で指定すれば確実ですが、デザインが崩れてしまうため、左右は変化させずに、真ん中だけを変化させたいと思っています。