<div>で囲んだ２つの領域の位置指定について

0   名前： nekton ： 2007/03/27（火） 02:18  ID:OZjDCwj2 sub-0X
テーブルのセル内に<div>で２つのボックスを作り、
一つは上にぴったり張り付くようにして、
もう一つはとなりのセルの大きさに合わせて一番下に張り付くように位置を指定したいのですが
valign="bottom"と書いたら、両方とも下に張り付くようになってしまいました。

現在このように書いております。
HTMLタグ↓

<table width="700" align="center" cellspacing="0" cellpadding="0">
<tr><td width="200" bgcolor="#80bfff" valign="bottom">
<div class="left3">上に張り付くようにする</div>
<div class="left4">このままでOK</div>
</td>
<td width="500" bgcolor="#ff0000">
ここには文章などが入るため、<br>
セルの高さが変化します。<br>
1<br>
2<br>
3<br>
</td></tr>
</table>

スタイルシート↓

div.left3{
background-color:#ffff00;
width:200px;
}

div.left4{
background-color:#ff8080;
width:200px;
}

どうしたら上のdivと下のdivで、それぞれ位置指定ができますか？
ご教授よろしくおねがいします。
1   名前： 元帥 ： 2007/03/27（火） 02:18  ［URL］  ID:LBhxx423 sub-bK
# >>0 のようなレイアウトにしなければならない表ってどんな内容なのでしょうね。

素直にrowspanで。
<table>
<tr>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
一覧へ戻る