confused, positioning right, body wider then viewport?
===

I've come across an issue that has me dumbstruck... I tried to position an element at the absolute right of the page using css 'right: 0px'. But it seemed my element was actually being placed a few pixels further right than expected and I lose part of it.

In an attempt to hunt down the problem I've simplified my case to the HTML below.

It would seem that an element with width 100% (also the body!) is actually wider than the viewport (but is triggering scollbars). I'm dumbstruck.. What am I overlooking here?


    <!DOCTYPE html>
    <HTML>
    <head>
    	<STYLE>
    	
    		body{
    			overflow: auto;
    		}
    	
    		#div1{
    			position: 		absolute;
    			top:			50px;
    			left:			0px;
    			width:			100px;
    			height:			145px;
    			background-color: 	red;
    		}
    	
    		#div2{
    			position: 		absolute;
    			top:			250px;
    			left:			0px;
    			width:			100%;
    			height:			145px;
    			background-color: 	red;
    		}
    	
    		.block{
    			position: 		absolute;
    			width:			30px;
    			height:			20px;
    			background-color: 	yellow;
    		}
    	
    		.sub0{top:0px; right:0px;}
    		.sub1{top:25px; right:1px;}
    		.sub2{top:50px; right:2px;}
    		.sub3{top:75px; right:3px;}
    		.sub4{top:100px; right:4px;}
    		.sub5{top:125px; right:5px;}
    	
    	
    	</STYLE>
    
    <body>
    	
    
    	<div ID="div1"> 
    
    		<div class="block sub0">0PX</div>
    		<div class="block sub1">1PX</div>
    		<div class="block sub2">2PX</div>
    		<div class="block sub3">3PX</div>
    		<div class="block sub4">4PX</div>
    		<div class="block sub5">5PX</div>
    		
    	</div>
    
    	<div ID="div2"> 
    
    		<div class="block sub0">0PX</div>
    		<div class="block sub1">1PX</div>
    		<div class="block sub2">2PX</div>
    		<div class="block sub3">3PX</div>
    		<div class="block sub4">4PX</div>
    		<div class="block sub5">5PX</div>
    		
    	</div>
    
    
    </body>
    
    </HTML>

