Menu
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
768
Here is one way of doing it. 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.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
Floats are an excellent way to position elements on your page, sometimes essential in fact. Show activity on this post. When using float, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible.
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/
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
