Search code examples
htmlcsspositioning

how can i position right absolute if the page is larger in width than my screen?


i want to position an element on the very right of the page.

i tried this on firefox 8, but its wrong:

<!DOCTYPE html>
<html>
<body style="min-width:2000px;background-color:#222">
<div id="a" style="position:absolute;right:0;width:200px;background-color:#eee">this should be on the right, even if you scroll right</div>
<div style="width:100%">this is just to adjust the page to max width</div>
</body>
</html>

that will position it on the right of the visible part of my screen, but my page is wider, so if i scroll to the right, the div a is not on the right anymore, but has a space to the right, that is the space that was not visible on pageload

I want to have it positioned really right of the page content (not of the visible part) so if i don't scroll right, then it should be outside of the visible area


Solution

  • <!DOCTYPE html>
    <html>
    <body style="min-width:2000px;background-color:#222; position: absolute;">
    <div id="a" style="position:absolute; right: 0; width:200px; background-color:#eee">this should be on the right, even if you scroll right</div>
    <div style="width:100%; ">this is just to adjust the page to max width</div>
    </body>
    </html>
    

    Setting absolute on body should fix it. http://jsfiddle.net/JXgk9/3/