CODEWITHSUNDEEP
htmlcss
Ahmad
Ahmad

Reputation: 9658

How to put a button on the right side of a div

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.

Upvotes: 1

Views: 208

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371013

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

Upvotes: 2

Thomas Landauer
Thomas Landauer

Reputation: 8355

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/

Upvotes: 1

Related Questions