フロートをクリアしてるのに余計な余白ができる。

ページタイトル用の<div></div>の中に
<h1>と<p>を左右にフロートさせ、
そのやや下側に10pxの余白をあけて、
3pxのボーダーをつけるデザインをしていたところ、
意図しないくらい大きな余白（50pxくらい）になってしまいました。

▽こんな感じです。
<div>
<h1>左：タイトル画像</h1>
<p>右：説明テキスト</p>
<br style="clear: both;" />
</div>

（確認 Windows IE6）





ボーダーをつけているので、
余計に余白が目立つ^.^;

ボックス閉じタグ手前で
<br style="clear: both;" />
とクリアしているのが問題か、と、このタグをとっぱらった上で
フロートクリアの特効薬「.clearfix」を<div></div>に施しましが結果はNG。

ふと、以前別のケースですが、
<ol></ol>にwidthを設定していなくて
画像を背景表示させられなかったことを思い出し、
<div></div>にwidth: 700pxを設定。
うまくいきました〜


【まとめ】
レイアウト要素をフロートさせて妙な余白がボックス下部にできたら、
そのボックスにwidth指定すれば改善する。