CODEWITHSUNDEEP
htmlcsslayout
Jeff
Jeff

Reputation: 1800

Positioning elements at top right of <div>

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?

Upvotes: 4

Views: 15052

Answers (3)

kapa
kapa

Reputation: 78731

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.

Upvotes: 3

Mike M
Mike M

Reputation: 212

Just changed the button styles to 

#myButton {
    cursor: pointer;
    position: absolute;
    top:5px; 
    right: 5px;    
}

Is this what you are looking for?

Upvotes: 1

pjam
pjam

Reputation: 6356

I guess that what you want is absolute positionning, so try that

position: absolute;
top: 0;
right: 0;

Upvotes: 1

Related Questions