【至急】ボックスの高さ指定

質問

base（３つのボックスを包囲する）のボックスに背景画像をつけています。baseの中にboxを３つ横に並べてます。
■box左は画像（背景黒でパディングで画像に黒枠をつけているようにみせている※アウトラインでやったらIEだと表示されなかったので）
■box真ん中は仕切り線（背景はなし）
■box右はテキスト（背景グレー）にしてます。

質問内容：
box右【テキストの高さ】に合わせて、baseの【背景画像】とbox真ん中の【仕切り線】を延長させるにはどうすればいいのでしょうか？

（html）
<div class="base">
<div class="box1_img">
<a href="#"><img src="#" alt=""></a>
</div>
<div class="box2_line"><img src="images/spacer.gif" width="1" height="1" alt=""></div>
<div class="box3_text">
<ul class="list-y">
<li>ああああ</li>
<li>いいいい</li>
<li>うううう</li>
<li>ええええ</li>
<li>おおおお<a href="#">かかか</a></li>
</ul>
</div>
</div>

（css）
ul{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
display: block;
}

li {
margin: 0;
padding: 0;
}

.base {
width: 618px;
height: 100%;（←分からない？？）
margin: 0;
padding: 8px 10px 0 10px;
text-align: left;
line-height: 1.5em;
background-image: url(../images/content_bg.gif);
background-repeat: repeat-y;
}

.base .box1_img {
width: 130px;
height: 97px;
margin: 0;
padding: 2px;
float: left;
background: black;
}

.base .box2_line {
width: 2px;
height: 100%;（←分からない？？）
margin: 0 10px 0 10px;
padding: 0;
float: left;
border-right: dotted 2px #ccc;
}

.base .box3_text {
width: 450px;
margin: 0;
padding: 5px;
float: left;
text-align: left;
background: #eee;
}

ul .list-y{
font-weight: bold;
text-align: left;
}

とっても切羽詰まってます！！
すぐに回答いただけると、とっても助かります。
よろしくお願いいたします。

回答No.4

DrFell · ベストアンサー

うーん、結局テーブル思考から離れる気はないのかな？テーブル思考から離れないと教えてもらっても受け取れないよ。＃1さん＃2さんの話も受け取ってないよね？

例：★本文★

上の例で星がイラストとした場合、テーブル思考の人は「★と本文と★」を出てきた順にhtmlに書く。
ｃｓｓ思考の人の場合、★の内容が本文の図解など、内容に関わる場合は「★２つと本文」をhtmlに描く。もし★が、デザイン上の飾りだったら、「本文」だけしか書かない。★は「本文」ブロックの背景としてｃｓｓで表示される様にデザインする。

今回の事は私は
<div>
<a href="#"><img src="#" alt=""></a>
<ul>
<li>ああああ</li>
<li>いいいい</li>
<li>うううう</li>
<li>ええええ</li>
<li>おおおお<a href="#">かかか</a></li>
</ul>
</div>
でｈｔｍｌはいけると思う。罫線の引き方も知っているんだしとりあえずｃｓｓの考え方を当てはめてやってみない？罫線やパデイングやマージンは知っているんだし、ULというブロック。divというブロックとかたまりとしてみて、それぞれに背景や罫線や空間を当てはめてみない？何も諦める必要はないよ

あっと、対象ブラウザによってｈｔｍｌも少し補正しないだめかもしれない難しいデザインだから、対象ブラウザも教えてくださいね。代わりにソースを書く気はないけど、添削ならするから。がんばってね

お礼

ご回答ありがとうございます。なかなかテーブルの発想から抜け出せなくて・・・。ブラウザーによっても違うし、cssを飲み込むのに苦戦してます。皆さんのお助けがあって助かっています。cssはとにかくhtmlのソースがシンプルになるようにということですよね。<div><img><ul>の３つにclass指定してみます。対応ブラウザはIE6/7とFirefoxです。

補足

div.base:after {　　（←afterを追加して解決しました）
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

imgにclass="box1"指定して、ulにclass="box3"を指定しました。

box2の要素をbox3に入れて、box2をなくしました。そして、テキストの背景色はなくすことにしました。画像とテキストの間に仕切り線があって、テキストに背景までつけるとくどいかなと思いなくしました。ソースがシンプルになりました！ありがとうございました。

回答No.3

DrFell

<div class="box2_line"><img src="images/spacer.gif" width="1" height="1" alt=""></div>
box2_line？
これはないんじゃないかな？cssに「spacer.gif」の発想はちょっと……。
box2_lineって線を引く為にボックスを作るんですか？テーブルを直接置き換えても、どんどんややこしくなるだけですよ？ｃｓｓは別の思考法で考えましょう。まず、思考のスイッチを変える必要があります。

急いでおられるなら、テーブルでいいんじゃないの？急いでおられるけど、他の場所は解決されても締め切られないし、急いでいるけど、貰った回答は長時間放置だし、ソースはテーブルレイアウト思考そのものだし。

ｃｓｓだとね、
図とテキストのボックスを並べる。
テキストのボックスの左側に線を引く指定をする。

っていうふうに考えないと。

お礼

ご回答ありがとうございます。

やはりspacer.gifはいけないですよね。他にも使ってしまっています。
divにid又はclassで画像の指定をしている空タグ（box）だとうまく表示されないので、spacer.gifを入れてみたところうまく表示されたので使ってしまいました。cssの指定は、background-image又はborderと合わせてwidth(height)/margin：0 auto;/padding; 0;の数値を入れているのですが何か原因があるのでしょうか？

質問した高さの問題はテキストの背景を諦めればすんなりいくかもしれません。試してみます。

回答No.2

goldfox

box2の仕切り線とやらは、box3の左枠線を利用すればいいと思います。
baseの背景は、bodyの背景ではダメなのですか？

お礼

ご回答ありがとうございました。

＜追記＞２段組している右コンテンツ内の子boxなので、bodyの背景は無理なんです。baseの背景は枠線の両端部分の画像なのでベースは白です。
box3はテキストの背景だけにグレー色をつけたいのですが、base（基本色）は白背景なので、box2の縦点線両端はパディングでbox3と間隔をあけたいのです。box2（縦点線）の中にbox3（テキスト）を入れてたほうがうまくいくでしょうか？いろいろ試してみます。

回答No.1

SAYKA

box右をbase(またはbase中のbaseその2)に据えて残り二つをその中に突っ込んでheight:100%
テキストは回り込み

とかどう？

お礼

ありがとうございます。試させて頂きます。