1

It may appear an obvious question, but check this fiddle which contains the following code 

<div style="border:1px #aaa solid;" id="srd_header">
    <button style=" float:right" onClick="window.external.Test();">Close</button>
</div>

As you see, the button doesn't position inside the div and the division doesn't surround the button! I used float:right for the button to push it to the right side.

Ahmad
  • 8,811
  • 11
  • 76
  • 141

2 Answers2

2

You need to apply a clearfix solution to the parent div, since you are floating the child (button).

One clearfix method is overflow: auto.

<div style="border:1px #aaa solid; background-color:red; overflow: auto;" id="srd_header">
    <button style=" float:right" onClick="window.external.Test();">Close</button>
</div>

DEMO

Another, simpler and more modern, approach would be to avoid floats and use flexbox.

<div style="border:1px #aaa solid; background-color:red; 
                display: flex; justify-content: flex-end;" id="srd_header">
    <button onClick="window.external.Test();">Close</button>
</div>

DEMO

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
1

That's because of the float on your button.

EDIT: If you want the button to stay on the right-hand side, use text-align:right; on the <div>.

EDIT2: Here's your fiddle updated to see it all together. Just a minor change in the CSS and everything works fine :-) http://jsfiddle.net/vbu23uom/5/

Thomas Landauer
  • 7,857
  • 10
  • 47
  • 99
  • Then how to push the button to the right side without float? – Ahmad Nov 29 '15 at 18:56
  • 1
    Thanks, yes, it works! however to push just the button on the right side and not the text (that may come later), I think the other answer is more fitted to my needs, thank you for help. – Ahmad Nov 30 '15 at 09:26