Stick button to right side of div
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:
- The right side of the button should be x pixels away from the right edge of the div.
- It should be on the same line as the header.
- 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.
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
Another solution: change margins. Depending on the siblings of the button, display
should be modified.
button {
display: block;
margin-left: auto;
margin-right: 0;
}
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/