html – CSS float right not working correctly

html – CSS float right not working correctly

you need to wrap your text inside div and float it left while wrapper div should have height, and Ive 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/

Here is one way of doing it.

If you HTML looks like this:

<div>Contact Details
    <button type=button class=edit_button>My Button</button>
</div>

apply the following CSS:

div {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: gray;
    overflow: auto;
}
.edit_button {
    float: right;
    margin: 0 10px 10px 0; /* for demo only */
}

The trick is to apply overflow: auto to the div, which starts a new block formatting context. The result is that the floated button is enclosed within the block area defined by the div tag.

You can then add margins to the button if needed to adjust your styling.

In the original HTML and CSS, the floated button was out of the content flow so the border of the div would be positioned with respect to the in-flow text, which does not include any floated elements.

See demo at: http://jsfiddle.net/audetwebdesign/AGavv/

html – CSS float right not working correctly

Verry Easy, change order of element:

Origin

<div style=>

    My Text

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

</div>

Change to:

<div style=> 

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

   My Text

</div>