scrolling and css align with "right: 0px"

Posted by Gabi on Stack Overflow See other posts from Stack Overflow or by Gabi
Published on 2009-01-09T10:40:24Z Indexed on 2010/05/09 7:48 UTC
Read the original article Hit count: 324

Filed under:
|
|
|
|

Hello,

In an HTML page, if I align some <div>s with "right: 0px", they all look very nice, as I expect. However, if I make the browser window smaller and the horizontal scroll bar appears, when I scroll the page to the right, I see an unexpected white space (instead of the background colors of my <div>s). It seems that my <div>s are aligned relative to the visible area of the page. See the sample code below:

<html>
    <head>
    	<style>
    	<!--
    	#parent {
    		position: absolute;
    		left: 0px;
    		right: 0px;
    		top: 0px;
    		bottom: 0px;
    		background-color: yellow;
    	}

    	#child {
    		position: absolute;
    		left: 100px;
    		top: 300px;
    		width: 1000px;
    		height: 400px;
    		background-color: blue;
    	}
    	-->
    	</style>
    </head>
    <body>
    	<div id="parent"><div id="child">some text here</div></div>
    </body>
</html>

Is there any way to make the "right: 0px" property align the controls relative to the size of the entire page, not only the visible area?

Thanks.

© Stack Overflow or respective owner

Related posts about html

Related posts about css