[解決済み] CSS float right が正しく動作しない

質問

右のフロートが思うように動きません。

ボタンが一行上のテキストの右側にきれいに配置されるようにしたいのですが。

<div style="padding: 5px; border-bottom-width: 1px; border-bottom-color: gray; border-bottom-style: solid;">

    My Text

<button type="button" class="edit_button" style="float: right; margin:5px;">My Button</button>

</div>

しかし、常に線の上に乗っているように見えます。

DIVのパディングやマージンを増やしても、右のボタンは下の行に押し出されているようです。

右のボタンのパディングやマージンをいじってみましたが、テキストの横にきれいに配置することができないようです。

フィドルはこちら

http://jsfiddle.net/qvsy7/

ありがとうございました。

解決方法は？

テキストをdivで囲み、左にフロートさせます。ラッパーのdivには高さが必要です。

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;">
   <div style="float:left;line-height:30px;">Contact Details</div>

    <button type="button" class="edit_button" style="float: right;">My Button</button>

</div>

また、ここでjsのフィドルがあります =) http://jsfiddle.net/xQgSm/