Stick button to right side of div

Question

http://jsfiddle.net/kn5sH/

What do I need to add in order to stick the button to the right side of the div on the same line as the header?

HTML:

<div>     <h1> Ok </h1>     <button type='button'>Button</button> </div> 

CSS:

div {     background: purple; }  div h1 {     text-align: center; }  div button { } 

More specifically:

1. The right side of the button should be x pixels away from the right edge of the div.
2. It should be on the same line as the header.
3. Should be contained in the div (stuff like float or relative positioning pops it out of the div visually)

What CSS techniques can be used to do this? Thanks.

Answer 1

Normally I would recommend floating but from your 3 requirements I would suggest this:

position: absolute; right: 10px; top: 5px; 

Don't forget position: relative; on the parent div

DEMO

Answer 2

Another solution: change margins. Depending on the siblings of the button, display should be modified.

button {   display: block;   margin-left: auto;   margin-right: 0; }