Question

My body is 800px wide:

body {
width:800px;
margin:15px auto;}

I have a <div> area (100x200px) that should be in TOP RIGHT corner of the body, no matter what screen or browser opened it. I tried to do following:

#login-hover-cont{width:210px;padding:20px;position:absolute;right:0px;_right:-1px;top:30px;z-index:3;background:#fff}

It puts the div to TOP RIGHT corner of the SCREEN, which is wrong – I want it to be in the place where the right border of BODY is. How do I do that?
Don’t feel like using “position:relative”.

Answer 1

Change your body to this.

body 
{
    width: 800px;
    margin: 15px auto;
    position: relative;
}

And your div will be inside the body and have styles similar to this.

#login-hover-cont
{
    ...
    position: absolute;
    top: 30px;
    right: 0px;
}

You need to do this because absolute positioning will always be relative to the elements nearest positioned ancestor.