css 段組（３段 中央可変領域）

質問

いつもお世話になります。

cssで３段組（左エリア、中央エリア、右エリア）をする際、左と右のエリアは固定領域で真中だけ可変領域にしようと思っています。
全ての領域が指定なら、floatを使ってpx指定でうまくいくのですが、真中のエリアだけ可変ということで100％を指定すると、思うようにきちんと表示されません。
ググると、そのあたりはテーブルを使ったほうが確実みたいなことが書いてあったりはしたのですが、うまくcssで設定できないものでしょうか？
尚、上下にヘッダーとフッターがあるものとします。

ご存知の方、アドバイス等よろしくお願いします。

回答No.4

d-_-b_kenken

左右サイドバーを「position: absolute;」で絶対配置して、中央コンテンツ部分の左右マージンをサイドバーの幅に合わせればいいのでは？

例：
/* 中央コンテンツ */
#center {
margin:　0px 200px ; /* 左右マージン200ピクセル */
}
#left {
width:200px; /* ボックス横幅200ピクセル */
position: absolute; /* 絶対配置を指定 */
top: 0px; /* 上からの表示位置 */
left: 0px; /* 左からの表示位置 */
}
#right {
width:200px; /* ボックス横幅200ピクセル */
position: absolute; /* 絶対配置を指定 */
top: 0px; /* 上からの表示位置 */
right: 0px; /* 右からの表示位置 */
}

この方法で、中央部分がウィンドウの幅に合わせて可変するリキッドレイアウトが再現できると思います。
※ 上部にはヘッダなどがあると思うので、#left 、#rightは「top」で上からの表示位置を微調整して下さい。

回答No.3

noname#19206

全体のレイアウトをCSSで行おうというのであれば#2 cyokokichiさんの提示したやり方でいいと思います。
ただし、通常はテーブルを利用するような複雑なリストの作成にCSSは不向きですのでご注意を。

参考URL：

http://kikitai.teacup.com/kotaeru.php3?q=2020019

回答No.2

cyokokichi

.left{float:left;width:100px;border:solid}
.right{float:right;width:100px;border:solid}
.center{margin:0 100px}
.footer{clear:both}

<div class="top">
top
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center
</div>
<div class="footer">
footer
</div>
これでは嫌ですか？
真中が下にきてしまいます。。。。

回答No.1

3o-clock

http://www.koikikukan.com/archives/2004/10/27-003127.php

とりあえず、ここみてお勉強してみては？