TABLEの高さを固定したいのですが…

質問

現在TABLEタグを利用してHPのレイアウトを作成しているのですが
高さが固定できずに困っています。

ソースですが
<table border="0" cellpadding="0" cellspacing="0" width="600" height="800">
<tr>
<td width="300" height="600" background="img/back1.jpg" align="left" valign="top">
<p>【１】</p>
</td>
<td rowspan="2" align="left" valign="top" width="300">
<p>【２】</p>
</td>
</tr>
<tr width="300">
<td background="img/back2.jpg">【３】<img src="img/back2.jpg"></td>
</tr>
</table>

これで
┌───────────────┐
│　　　　　│　　　　　　　　　│
│　　　　　│　　　　　　　　　│
│　　　　　│　　　　　　　　　│
│　【１】　│　　　　　　　　　│
│　　　　　│　　　　　　　　　│
├─────┤　　　　　　　　　│
│　　　　　│　　　【２】　　　│
│　　　　　│　　　　　　　　　│
│　【３】　│　　　　　　　　　│
│　　　　　│　　　　　　　　　│
│　　　　　│　　　　　　　　　│
│　　　　　│　　　　　　　　　│
└─────┴─────────┘

という形を作成したいと考えています。

この時【１】は高さ600pxの固定サイズで、【２】に画像や文章が追加され縦に伸びるたびに【３】に設定してある背景画像（background="img/back2.jpg"）がループしながら縦に伸びていくようにしたいと考えています。

ところがIE8以降で確認すると、【１】が固定されずに【２】に合わせてどんどん伸びてしまいます。
逆に【３】が固定されているようです。

別にテーブルを使用しなくても【１】だけが固定されて【２】と【３】が内容によって同時に動き、かつ【３】の背景が伸びていけば構わないので「別のやり方があるよ」というアドバイスだけでも頂ければと思い質問させていただきました。

よろしくお願いします。

回答No.4

mikemike7

>こちらは「背景だけが置いてある<td>の上に文章を置く」という事ですよね？
質問内容の意図からは、【２】の高さが大きくなって、【１】＋【３】の合計の高さを超えた場合に、【１】はそのままの高さで、【３】だけを延長したいと感じました。
テーブルの高さが増えた場合、【１】の高さはそのままで、【３】の背景画像は伸ばしたいんですよね？
だからTDに【３】の背景画像を入れ、【１】の入ったDIVは高さ固定とし、【１】用の背景画像を入れています。
これで、テーブルが伸びた場合でも【１】の高さは固定で、TDだけが伸び、背景画像も伸びることになります。

>状況によっては背景でおいた画像とループさせた背景がずれてしまうんです＞＜
どういう状況でしょう？背景で置いた画像とループさせた背景って何だろう。
細かなレイアウトは、今回の質問内容にも含まれているんです？
こういう形で実装したいということかと思っていますが。

>NO.2の方と同じやり方ということでしょうか？
違うように感じます。
私の表で言うと、Aの中に更にテーブルを入れ、その中に、【１】と【３】を入れるという記載のように思います。
ですが、それだと、３の背景画像は伸びませんよね。

>シンプルさが全然違ったので
まあ、No３の方が完璧なHTMLとCSSで書いてくれるかもしれませんが、参考までに私も載せておきます。

// CSS
#container{width:600px;background-image:url(img/back2.jpg);}
#boxA{float:left;width:300px;}
#boxB{float:left;width:300px;background-color:#ffffff;}
#box1{height:600px;background-image:url(img/back1.jpg);}
.clear{clear:both;}

// HTML
<div id="container">
<div id="boxA">
<div id="box1">【１】</div>
【３】<img src="img/back2.jpg">
</div>
<div id="boxB">
<p>【２】</p>
</div>
<div class="clear"></div>
</div>