adding button to top right of block level elements

Question

How would I add a button to the top right of block level elements? Lets say i have :

<div>some content here</div>

and lets say this content is long enough to make a "block", how would I format to have a button at the TOP RIGHT of the block, right next to the block that is?

Answer 1

(1) One way is to float the button right at the top of the container.

<div><button>My Button</button>some content here</div>

div + button {
float: right;
}

(2) Another way is to position the button absolutely inside the div container and give the div container position (so that elements postioned absolutely inside it are relative to this container). This way the button can be anywhere in the markup, providing it is inside the container.

div {
position: relative;
}

div button {
position: absolute;
top: 0;
right: 0;
}

However, the button will now be on top of other content inside the container so you might have to adjust this with padding etc.