Question

OK there is an image in a centered div, which is placed at the center of a page. Its width is 400px.

What I’m trying to achieve is:

• to place another div – inside of that div with alignment right via CSS.

Due to various screen resolution, I wish to avoid commands “top:, right:”.

How to achieve that?

<div class="non"><div class="info">Go top right</div><a href=""><img src="images/top.jpg"></a></div>

CSS..

.non { width:400px; background-color:#d20000;  }
.info { position:absolute;float:right; background-color:#efefef; }

Example here

Answer 1

Just do this, it should work:

.non { width:400px; background-color:#d20000; position: relative; }
.info { position:absolute; top: 0px; right: 0px; background-color:#efefef; }

I know you want to avoid using top and right, but if you do this, the .info class is positioned perfect top right corner of the .non class div, not the whole page 🙂