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

User · Accepted Answer

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/

User · Answer

LIke this  final answer  css  h2       border-bottom-width  1px      border-bottom-style  solid      margin  0      padding  0     edit button       float  right        demo1  css  h2       border-bottom-width  1px      border-bottom-style  solid      border-bottom-color  gray      float  left      margin  0      padding  0     edit button       float  right      html   lt h2 gt  Contact Details lt  h2 gt   lt button type  button  class  edit button   gt My Button lt  button gt      demo  html   lt div style  border-bottom-width  1px  border-bottom-style  solid  border-bottom-color  gray  float left   gt  Contact Details     lt  div gt   lt button type  button  class  edit button  style  float  right   gt My Button lt  button gt

User · Answer

You have not used float left command for your text

User · Answer

Here is one way of doing it   If you HTML looks like this    lt div gt Contact Details      lt button type  button  class  edit button  gt My Button lt  button gt   lt  div gt    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

User · Answer

Verry Easy  change order of element   Origin   lt div style    gt       My Text       lt button type  button  style  float  right  margin 5px   gt         My Button      lt  button gt    lt  div gt    Change to     lt div style    gt         lt button type  button  style  float  right  margin 5px   gt         My Button       lt  button gt      My Text   lt  div gt

[html] CSS float right not working correctly

Examples related to html

Examples related to css

Examples related to css-float