html - 2 つの DIV を並べて配置すると、下部に余分なスペースができます...

Question

別の大きな固定幅 DIV 内に 2 つの固定幅 DIV を並べて配置する必要があり、機能しています。これは私が書いたコードです:

<div id="mainDiv">
    <div id="divLeft">      <img src="bla bla bla" >     </div>
    <div id="divRight">   Normal Text Here.....  </div>
</div>

これはCSSです：

#mainDiv { width:1100;overflow:hidden; }

#divLeft { width:720; float:left;}

#divRight { width:380; float:right;}

問題は、サイズ 720X480 の画像を最初の DIV に配置すると、最初の DIV (「divLeft」) の高さが 485 になることです。余分な 5px を与えるのはなぜですか?

ここでページを表示できます: http://www.touchmedia.ca/TestPos.php

次の点に注意してください: メイン div の b'cos に対して、overflow:hidden を実行しました。そうしないと、フロートによって外側の div の効果が削除されます。高さではなく幅のみをハードコーディングしました。メイン div 幅 (1100) = 左 div 幅 (720) + 右 div 幅 (380)

どうもありがとう、

アイザック