cssで長さの指定方法を簡単に出来ないでしょうか？

質問

現在3カラムでホームページを作っています。boxなどの指定は全てcssでやってみたのですがうまくいきません。

現状の問題は中央のboxだけがとにかく下に長いんです。こちらにメインの情報を載せているためなのです。そして左右のboxはメニューくらいの表示なのでとても短いです。

しかし、左右のboxも中央のボックスの長さにぴったりとあわせてやりたいのですが、うまく出来ません？

何故中央にあわせたいかといいますと、左右のboxは色を付けているため下まで全てその色にさせたいと考えています。

そこで色々と試してboxの長さを3000px（中央にあわせて）などと指定してみましたが、中央の文章量などが変われば左右だけ取り残されてしまいます。

私の説明で伝わりますでしょうか？

ようは、中央がどんなに長さが変化しても左右もそれに合わせて中央のboxの下部分にぴったりとあわせることが出来たらと思います。

どなたか解決法をご存知の方、アドバイス宜しくお願いいたします。

回答No.3

ticky · ベストアンサー

ごめんなさい。手元で試したところ、margin-bottomではうまくできませんね。

positionを使って実現できました。

---HTML
<div class='entry_body'>
<div class='color1 pos_body'><p>本文<br />ここには本文が入ります。<br />本文の続き<br />本文の続き<br />本文の続き<br />本文の続き<br />本文の続き<br />本文の続き</p></div>
<div class='color2 posColumn1'><p>コラム1</p></div>
<div class='color3 posColumn2'><p>コラム2</p></div>
</div>

---CSS
.entry_body { position: absolute; top: 0px; left: 0px; bottom: auto; }

.pos_body { width: 430px; position: static; top: 10px; left: 10px; }
.posColumn1 { width: 100px; position: absolute; top: 10px; left: 470px; margin-bottom: 10px;}
.posColumn2 { width: 100px; position: absolute; top: 10px; left: 600px; bottom: 10px; }

回答No.2

partita

例えば

<div id="wrap">
<div id="left">左</div>
<div id="center">中央</div>
<div id="right">右</div>
</div>

として、背景色を左右のボックスにしても意図した通りにはならないでしょう。そこで、wrapに背景「画像」を使用します。この画像はもちろん1枚画像です。こうすると、left、center、rightの高さがずれていても、最高（最長）のものにあわせて背景画像が表示されます。どれかが取り残されることもなくなります。

ただし、wrapが固定幅であることが前提の方法です。
wrapの外側にさらにもうひとつdivを設定すれば、可変幅でも大丈夫だと思います。

お礼

ありがとうございます。

なるほど！画像を使うという方法もあるのですね。
試してみたいと思います。

回答No.1

ticky

左右のboxにmargin-bottomを設定してみてはどうですか？

お礼

ありがとうございます。

margin-bottomですか・・・。申し訳ないのですがmargin-bottomに対してどのような指定を行えばよいのでしょうか？