Placement of 4 html elements in each corner of the div

Question

Hi, thanks for all your help. I have a div (180px to 75px) in which I need to place 3 paragraphs and an image. Now I need to place these elements in all corners of the divs. It should look something like this → (I’m not yet allowed to post photos. I hope you understand anyway.)

This is what the div should look like (each color is an element), but I can’t imagine the description on the right.

http://i.imgur.com/bE87euS.png

But no matter how I play with "display: inline-block" or "float", I can not get it to work.

I hope one of you can give me an answer?

<div style="width:180px; height: 75px; background-color: green;" id="achievement"> <div> <p style="display: inline-block; margin: 0px" id="title">Title Title Title</p> <p style="margin:0px; float:right;" id="exp">500 exp</p> </div> <div> <img style="padding-left: 10px;" id="img"width="50" height="50" src="image.png"/> <p style="float:right; margin: 0px;" id="desc">Bla Bla Bla this is a description</p> </div> </div> 

(I am using an extern css file, of course. I just used a style tag to make it easier for you to understand.)

Answer 1

Use position:relative in the parent container to set the positioning context. Then use position:absolute for all children to place them in the corresponding corners.

 #parent { position:relative; border:3px solid blue; height:300px; width:500px; padding:0; } p { position:absolute; border:2px solid; margin:0; padding:5px; } p:nth-child(1) { border-color:green; top:0; left:0; } p:nth-child(2) { border-color:red; top:0; right:0; } p:nth-child(3) { border-color:yellow; bottom:0; left:0; } p:nth-child(4) { border-color:pink; bottom:0; right:0; } 

 <div id="parent"> <p>First</p> <p>Second</p> <p>Third</p> <p>Fourth</p> </div> 

Implementation example here

Answer 2

Use text-align:right . It still helped me.

http://jsfiddle.net/Neaw7/