CSSでテーブル状にレイアウトしたが，背景色の範囲が意図と異なる．

質問

cssを使って3列のテーブル状のレイアウトを作成しています．
外部cssファイルにてbackground-colorを記述して
背景色を3列それぞれにつけているのですが，行数の
違いによって背景色の付く範囲がそれぞれの列で
変わってしまっています．
（下のソースでいうと，111...は3行分の背景色が付きますが，
他の222...と333...は1行分の背景色しかつきませんが，
222...と333...の部分も背景色は3行分つけたいのです．）

原因は文字数の違いにより行数が異なるためと思いますが，
これを解決する方法はありますか？

【html記述】
<div id="table">

<div id="table_left">
111111<br>
111111<br>
111111<br>
</div>

<div id="table_center">
222222
</div>

<div id="table_right">
333333
</div>
<BR class="clears">
</div>

【css記述】
#table
{
width:700px;
margin:0px auto 0px;
border-style:solid;
border-color:#999;
border-width:1px;
}
#table_left
{
width:64px;
background-color:#e5ded7;
color:#80655e;
padding:8px;
float:left;
}
#table_center
{
width:294px;
padding:8px;
float:left;
}
#table_right
{
width:294px;
background-color:#edf8b1;
background-repeat:repeat;
padding:8px;
color:#3d6e14;
float:right;
}

回答No.4

tenderfeel

ずいぶん不親切な回答だったので自己補足します。

No1さんが出しておられる親要素にFloat指定するテクニックは
margin:0 auto;ではfloat指定をすると中央表示にならないので使えません。
そういう場合、ClearFixと呼ばれるCSSハックを使うと、FloatをかけなくてもFloatしたのと同じような状態になります。
#table {display:inline-block;}　はIE7用の指定です。

レガシーブラウザでは確認してないのですが、IE6、FireFox等普及しているメジャーなブラウザでは同じような表示になると思います。

お礼

No.3，No.4とご回答いただきありがとうございます．

1px四方のGIFファイルを背景として設定する方法は
当方も考えたのですが，容量が重くなってしまうのではないかと
思ったので採用しませんでした．

ありがとうございました．

回答No.3

tenderfeel

▼これで出来ると思います（paddingとかは消してあります）
#table
{
width:700px;
margin:0px auto 0px;
border-style:solid;
border-color:#999;
border-width:1px;
height:auto;
background:url(back.gif) repeat-y right top;
}
/*clear fix */
#table:after {
content:".";
height:0px;
clear:both;
display: block;
visibility:hidden;
}
#table {display:inline-block;}
/* end */
#table_left
{
width:100px;
background-color:#e5ded7;
color:#80655e;
float:left;
}
#table_center
{
width:300px;
float:left;
background-color:#ffffff;
}
#table_right
{
width:300px;
color:#3d6e14;
float:right;
}
<div id="table">

<div id="table_left">
111111<br>
111111<br>
111111<br>
</div>

<div id="table_center">
222222
</div>

<div id="table_right">
333333
</div>
</div>

右のテーブルの背景色は、#tableに背景画像を設定してrepeat-yで縦方向にリピートさせてつけます。

回答No.2

sioaji_x

CSS中の
#table_left
#table_center
#table_right
のそれぞれに、
height:70px; 程度の高さ指定はどうですか？
きれいではないですが、簡単です。
でも、文字数や行数が変わっても、高さ指定を変更しなくてもいいのが理想ですよね。

お礼

回答していただきありがとうございます．

おっしゃる通り，文字数や行数が変わる可能性のある部分に使用するため，高さ指定をしないのが理想的なのです．

回答No.1

syuga

cssで解決するならこちらの方法が一応ベストかと思います。
http://css-happylife.com/log/css-template/000028.shtml

これ以外にもJavascriptを使う、padding,margin,overflowを指定して強制的に高さをそろえる方法などもありますが。

お礼

お返事ありがとうぎざいます．

リンク先のページをよく読んで，試してみようと思います．
paddingやmarginを用いて強制的に高さを揃える事も
やってみましたが，文字数が変わる可能性があるために
あきらめておりました．