ボーダースタイルがうまく表示できない

質問

#content {
width:525px;
}
div.box {
width:525px;
margin-top: 20px;
border-bottom:dotted 1px #ccc;
}
div.left {
width:140px;
float: left;
font-weight: bold;
margin-left: 5px;
}
div.right {
width:380px;
float: left;
line-height: 20px;
height: 20px;
}
<div　id="content">
<div class="box">
<div class="left">Address</div>
<div class="right">住所<br>東京都</div>
</div>
</div>

クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ？によりボーダーがトップになっているように見えてしまいます。
どこが間違っておりますか？
アドバイスを宜しくお願いします。

回答No.1

naokita · ベストアンサー

ブラウザにもよりますが、ズレではありません・・・
div.left と div.right を float しているのだから、
浮いた状態になっている。
その為、div.box が、div.left と div.rightを認識できないのでテキストで認識出来る範囲しか囲む事は出来ない。

borderだけではなく、背景なども同じく表示出来ないはず・・・
------------------------
div.box 内でクリアーする事。
（フロート時はクリアーをセットで使う事）

クリアーのテクニックは、多々ありますが、
表示差異も確認しながら色々試しましょう。

お礼

overflow:hidden;で解決できました。

補足

アドバイスをありがとうございます。
div.box 内に色々なクリアーを付けてみましたが、変わりませんでした。どこが違うのでしょうか…？