2列の表の片方のセルのサイズが分からない時

質問

こんにちは。

2列のテーブルを組んでいるのですが、片方の縦サイズが分からない時の揃え方の案をご伝授ください。

現在の状態は、画像のような状態です。

◆外側の黒枠は組んでいるテーブル
◆(1)、(2)は完全な画像
◆(3)は複雑な別のテーブルなのでサイズが分からない
◆(4)「あいうえお」という文字列に上下左右paddingでbackgroundの余白
　（(4)の水色は文字列のbackgroundだと考えて頂ければ良いです。）

----------HTML-----------
<table border="0" cellspacing="0" cellpadding="0">
　<tr>
　　<td>
　　　<img src="(1).gif"/>
　　　<img src="(2).gif"/>
　　　<div id="aiueo">
　　　　「あいうえお」
　　　</div>
　　</td>
　　<td>
　　　<(3)のテーブルなんですが複雑なので省きます>
　　</td>
　</td>
</table>

----------CSS----------
#aiueo{
　background-image:(4)（１×１pxのもの）
　text-align:center;
　font-size:11px;
　padding:5px;
　margin:0;
}

こんな感じです。

(4)を調整して右の(3)の下端（オレンジの点線）に合わせたいのです。

(3)の高さが分かっていれば私でも分かるのですが…

現在は(4)のCSSのpadding:5px;の部分を微妙に変えたりしてなんとかIE8では(3)の下端に揃えることはできたのですが、

問題は所詮paddingの数字の調整だとブラウザによってオレンジのラインから飛び出たりするのです。

そこでオレンジのラインまで(4)のbackground(1×1px）をリピートさせるなどして自動で揃えることはできないものでしょうか？

色々試してはいるのですがなかなかうまくいかず、いらいらばかりして頭が回らなくなってます…

かれこれ７時間くらい苦戦してるもので・・・

仕事のホームページなので正直焦っています。

どなたか助けてください。お願いいたします。

回答No.1

metametamu · ベストアンサー

一応先に断っておきますが、左の文字を切る方法はいろいろと危険です。
(3)の親要素のtdに背景色でも指定してデザインになじませる方がよっぽどいいと思います。

<table border="0" cellspacing="0" cellpadding="0">
　<tr>
　　<td id="LEFT">
　　　<img src="(1).gif" id="IMG1" />
　　　<img src="(2).gif" id="IMG2"/>
　　　<div id="aiueo">
　　　　「あいうえお」
　　　</div>
　　</td>
　　<td id="RIGHT">
　　　<(3)のテーブルなんですが複雑なので省きます>
　　</td>
　</td>
</table>

#LEFT{
position: relative;
overflow: hidden;
}

#LEFT #aiueo{
position: absolute;
width: 400px;
top: 500px;
left: 0;
}

事情はわかりませんが、長く使うページであればweb業者に依頼されるか後々修正するかしないと厳しいですよ。

お礼

>>
(3)の親要素のtdに背景色でも指定してデザインになじませる方がよっぽどいいと思います。

お陰さまでひらめきました。

(4)のbackgroundの設定を無くし、<table>自体にそのbackgroundを設定、リピートはx,y共。

たったこれだけで簡単に済みました。。。

(4)の下端がラインより飛び出している時は(3)の下にbgが充填され、
(4)の下端がラインより引っこんでいる時は(4)の下端にラインまでbgが充填されます。

こんなに悩んでたのはなんだったんでしょうか…

お陰さまでバッチリ行きました。

上級者の方々の技術はもとより、発想力には恐れ入ります…

大変感謝いたします。ありがとうございました。