It depends on what exactly you want to achieve.
If you just want to have it on the right, then I'd recommend against using position absolute, because it opens a whole can of worms down the line.
The HTML can also be unchanged:
HTML
<div>
<h1> Ok </h1>
<button type='button'>Button</button>
</div>
the CSS then should be something along the lines of:
CSS
div {
background: purple;
overflow: hidden;
}
div h1 {
text-align: center;
display: inline-block;
width: 100%;
margin-right: -50%;
}
div button {
float: right;
}
You can see it in action here: http://jsfiddle.net/azhH5/
If you can change the HTML, then it gets a bit simpler:
HTML
<div>
<button type='button'>Button</button>
<h1> Ok </h1>
</div>
CSS
div {
background: purple;
overflow: hidden;
}
div h1 {
text-align: center;
}
div button {
float: right;
margin-left: -50%;
}
You can see it in action: http://jsfiddle.net/8WA3k/1/
If you want to have the button on the same line as the Text, you can achieve it by doing this:
HTML
<div>
<button type='button'>Button</button>
<h1> Ok </h1>
</div>
CSS
div {
background: purple;
overflow: hidden;
}
div h1 {
text-align: center;
}
div button {
float: right;
margin-left: -50%;
margin-top: 2em;
}
You an see that in action here: http://jsfiddle.net/EtqVh/1/
Cleary in the lest example you'd have to adjust the margin-top for the specified font-size of the <h1>
EDIT:
As you can see, it doesn't get popped out of the <div>
, it's till inside. this is achieved by two things: the negative margin on the <button>
, and the overflow: hidden;
on the <div>
EDIT 2:
I just saw that you also want it to be a bit away from the margin on the right. That's easily achievable with this method. Just add margin-right: 1em;
to the <button>
, like this:
div {
background: purple;
overflow: hidden;
}
div h1 {
text-align: center;
}
div button {
float: right;
margin-left: -50%;
margin-top: 2em;
margin-right: 1em;
}
You can see it in action here: http://jsfiddle.net/QkvGb/