レイアウトの崩れについて

質問

先日から初めてHP作りに挑戦しているのですが、<div>の中の<table>の位置がおかしい（tableの位置がdivの下のほうに突き抜けて表示される）ので困っています。
どうすればdivの中にtableがおさまるでしょうか。

(XHTML)

<div id="main">
<div class="contents">
<table>
<tr>
<td id="tdl" rowspan="4">>映像</td>
<th>文字</th>
<td>文字</td>
</tr>
<tr>
<th>文字</th>
<td>文字</td>
</tr>
<tr>
<th>文字</th>
<td>文字</td>
</tr>
<tr>
<th>文字</th>
<td>文字</td>
</tr>
</table>
</div>
</div>
<div id="sub">
内容
</div>

(CSS)
#main {
width: 600px;
float: left;

}

.contents {
width: 600px;
height: 155px;
background-color: #f5f5dc;
font-size: 16px;
float: left;
}

table {
width: 590px;
height: 150px;
border-collapse: collapse;
table-layout: fixed;
border: solid;
border-color: #f1f1f1;
}

th {
width: 100px;
height: 32px;
border-bottom: solid;
border-bottom: thin dotted;
background-color: #f1f1f1;
font-size: 16px;
text-align: left;
}

#tdl {
width: 160px;
height: 145px;
border: none;
}

td {
width: 320px;
height: 32px;
border-bottom: thin dotted;
font-size: 16px;
text-align: left;
}

#sub {
width: 150px;
height: 145px;
background-color: #999;
float: right;
}

関係あるか分かりませんが、サイト全体の幅は770pxです。
書き方がめちゃくちゃだと思うので、おかしなところも指摘していただけると幸いです。
よろしくお願いします。

回答No.2

noname#100277 · ベストアンサー

XHTML 1.0 Strictでテストした結果は以下。
別に問題は無いと思います。
システム拡張子アリ。
http://shagazo.com/n1/userlog/aides/img/20091021224558.html
システム拡張子ナシ。
http://shagazo.com/n1/userlog/aides/img/20091021224643.html
そして画像化したのは以下でsafari4.0(530.17)での結果。
（google_chrome3.0.195.27も同じ結果。）
http://shagazo.com/n1/userlog/aides/img/20091021224711.jpg

確認はIE8、Firefox3.0.14／3.5.3、google_chrome3.0.195.27、opera9.64(10487)、safari4.0(530.17)

お礼

ご回答ありがとうございます。
なんとか解決することができました。

回答No.3

freepacket

開示するソース部分が足りないのでは？

> 関係あるか分かりませんが、サイト全体の幅は770pxです。

幅770pxを指定したDIVに対して突き抜けているのではないでしょうか？
#main、#subの外側にもう一つDIVがあるような気がするのですが...

お礼

ご回答ありがとうございます。
なんとか解決することができました。

回答No.1

yyr446

ご提示のHTMLとCSSをそのままテストしても、
どこも突き抜けて表示されてるようなところが
見当たりませんが．．．．？
WinXP IE7.0、Firefox3.5　で見ました。

お礼

ご回答ありがとうございます。
なんとか解決することができました。