Question

I have a Fiddle that contains a div, some text and a button.

I’d like to position the button on the top right of the div no matter how big the div gets, or how much text is in the div.

I though something like

float: right;
position: relative;

may do the trick, but this doesn’t work, because the ‘text’ in the div will push the button down.

Is there a better way to do this? Maybe absolutely position the button to the top right, instead of relative?

Answer 1

If you use absolute positioning, you can simply use top and right to position the button relative to the top right corner.

#myButton {
    position: absolute;
    top: 0;
    right: 0;
}

jsFiddle Demo

Please note that when absolutely positioned, the element is taken out of the flow, so other elements (like that <p> there) can go “under” it if they are big enough.