How to stick button element to right side of Div container? (HTML)

HeelpBook@heelpbook

116 Posts

#1 · February 22, 2018, 7:45 pm

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?

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

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).

HeelpBook@heelpbook

116 PostsTopic Author

#2 · February 22, 2018, 7:47 pm

Normally we would recommend floating (right) but from your 3 requirements we would suggest the following approach:

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

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

So, something like, in CSS:

div {
position: relative;
}

div h1 {
text-align: center;
}

div button {
position: absolute;
right: 10px;
top: 5px;
}