ブロックとテーブルの間の隙間

<div id="content">
<div id="main">
<table border="1" frame="hsides" rules="rows">
<tr><td >カラー</td></tr>
</table>
</div>
<div id="left">
<div><img src="images/side.png" class="alphafilter" /></div>
</div>
</div>
上記のようにスタイルシートでメイン、レフトの２カラムを設定し
メインの中に表組みを設定するとメインの上とテーブルの間に
大きい隙間が出きて、レフトの画像と段違いになります。
どうしてそうなるんでしょうか？
チェックしたことを記します。
○レイアウトに問題はありません。同じレイアウトの他のページは隙間がありません。
○ブロックとテーブルの間にひらがな表示で隙間を作ったことはありません。
○テーブルの寸法はブロックに収まるものになっています。

同じような現象にあった方いらっしゃいませんか？解決方法を
教えてください。

No.1 ベストアンサー 回答者： font_color 回答日時： 2009/05/06 12:41

こんにちは。

CSSがないので推測でしかありませんが、
このソースではおそらく、
#content{
width:(全体の幅);←※1
#main{
float:right;←※2
width:(#mainの幅);←※3
margin:**;
padding:**;
}
#left{
float:left;←※4
width:(#leftの幅);←※5
margin:**;
padding:**;
}
のように指定していると思います。
考えられる原因は
⇒table,divのpaddingやmarginの数値が計算に入っていない。

またtable,divのpaddingやmarginは0、もしくは計算に入れているものと考えると、
⇒※2、※4のようにそれぞれ左右へfloatしているコンテンツが「※1の幅＞（※3+※5）」となっている

とまぁ、ここまで書いていてなんですが、そもそもソースがおかしいと思います。

この回答へのお礼

font_colorさんありがとうございます。解決しました。

お礼日時：2009/05/06 13:24