CSS positioning relative to total page area

Question

I hope I can explain this.

I have an image which is "stuck" to the right hand side of the browser window, so when the browser window changes size it remains stuck to the right. The style I use is:

style="position :absolute; top :4px; right :4px"

I also have a minimum body width of 1024px:

body 
{
    min-width: 1024px;
}

This all works great until the window is resized less that 1024, then the image is still stuck to the right hand side of the window. But I would like it to stick to the right hand side of the total page area. If you see what I mean.

Thanks,

AJ

score 2 · Accepted Answer · answered Jan 05 '12 at 16:10

the css position attribute calculates based on a positioned parent. If your image does not have any parents which are positioned, then the absolute will be relative to the screen. You should be able to fix this by putting position:relative; in your css for the body or by wrapping everything in a div of the correct size with position:relative;

score 0 · Answer 2 · answered Jan 05 '12 at 16:32

You may succeed with using a position: relative in a div containing your image, with some code like this :

<div style="position:relative; min-width: 1024px">
    <div style="position: absolute; top: 10px; right: 4px; width: 20px; height: 20px; background-color: red"></div>

    <div style="width: 1024px; margin: auto 0px; height: 400px; background-color: #AAA">&nbsp;</div>
 </div>

Example here: http://jsfiddle.net/7jafS/

CSS positioning relative to total page area

2 Answers2