CSS float right not working correctly

Question

My right float is not working how i expect it to.

I want my button nicely aligned to the right of my text above a line :

<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>

However it always seems to hover over the line.

If I increase the padding or margin of the DIV then the button on the right still seems to be pushed over the line at the bottom.

I have tried to play around with paddings and margins of the button on the right, but i can't seem to get it to be placed neatly next to the text.

Fiddle is here:

http://jsfiddle.net/qvsy7/

Many thanks

Answer 1

you need to wrap your text inside div and float it left while wrapper div should have height, and I've also added line height for vertical alignment

<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>

also js fiddle here =) http://jsfiddle.net/xQgSm/