Stick button to right side of div
HtmlCssHtml Problem Overview
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.
Html Solutions
Solution 1 - Html
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
Solution 2 - Html
Another solution: change margins. Depending on the siblings of the button, display
should be modified.
button {
display: block;
margin-left: auto;
margin-right: 0;
}
Solution 3 - Html
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/
Solution 4 - Html
<div>
<h1> Ok </h1>
<button type='button'>Button</button>
<div style="clear:both;"></div>
</div>
css
div {
background: purple;
}
div h1 {
text-align: center;
}
div button {
float: right;
margin-right:10px;
}
Solution 5 - Html
div {
display: flex;
flex-direction: row-reverse;
}
Solution 6 - Html
Use position property
style="position: absolute;right:0;top:0"
Solution 7 - Html
change the CSS as follows:
div button {
position:absolute;
right:10px;
top:25px;
}
Solution 8 - Html
margin-left: auto;
was sufficient for me