title: CSS float right not working correctly
body: <p>My right float is not working how i expect it to. </p>
  
  <p>I want my button nicely aligned to the right of my text above a line :</p>
  
  <pre><code>&lt;div style="padding: 5px; border-bottom-width: 1px; border-bottom-color: gray; border-bottom-style: solid;"&gt;
  
      My Text
  
  &lt;button type="button" class="edit_button" style="float: right; margin:5px;"&gt;My Button&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>However it always seems to hover over the line.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Fiddle is here: </p>
  
  <p><a href="http://jsfiddle.net/qvsy7/" rel="noreferrer">http://jsfiddle.net/qvsy7/</a></p>
  
  <p>Many thanks</p>