title: confused, positioning right, body wider then viewport?
body: <p>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.</p>
  
  <p>In an attempt to hunt down the problem I've simplified my case to the HTML below.</p>
  
  <p>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?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;HTML&gt;
  &lt;head&gt;
      &lt;STYLE&gt;
  
          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;}
  
  
      &lt;/STYLE&gt;
  
  &lt;body&gt;
  
  
      &lt;div ID="div1"&gt; 
  
          &lt;div class="block sub0"&gt;0PX&lt;/div&gt;
          &lt;div class="block sub1"&gt;1PX&lt;/div&gt;
          &lt;div class="block sub2"&gt;2PX&lt;/div&gt;
          &lt;div class="block sub3"&gt;3PX&lt;/div&gt;
          &lt;div class="block sub4"&gt;4PX&lt;/div&gt;
          &lt;div class="block sub5"&gt;5PX&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div ID="div2"&gt; 
  
          &lt;div class="block sub0"&gt;0PX&lt;/div&gt;
          &lt;div class="block sub1"&gt;1PX&lt;/div&gt;
          &lt;div class="block sub2"&gt;2PX&lt;/div&gt;
          &lt;div class="block sub3"&gt;3PX&lt;/div&gt;
          &lt;div class="block sub4"&gt;4PX&lt;/div&gt;
          &lt;div class="block sub5"&gt;5PX&lt;/div&gt;
  
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/HTML&gt;
  </code></pre>