title: css bug? left is different from right?
body: <p>Hello i found a very peculiar thing, apparently left is rendered different from right.
  see this fiddle:
  <a href="http://jsfiddle.net/Hn8At/2/" rel="nofollow">http://jsfiddle.net/Hn8At/2/</a>
  here is the html</p>
  
  <pre><code>&lt;div id="wraper"&gt;
      &lt;div id="ribbon_ct"&gt;
          &lt;div class="ribbon left"&gt;&lt;/div&gt;
          &lt;div class="ribbon right"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>body{ margin:0; padding:0px; }
  #wraper{ width:800px; margin:0 auto; background:#eee;padding-top:500px;}
  #ribbon_ct{ width:100%; background:#c00; height:400px; }
  .ribbon{background:#0C9; width:30px; height:30px; position:relative;}
  .left{float:left;}
  .right{float:right;}
  
  .ribbon.left{  left:-30px;}
  .ribbon.right{ right:-30px;}
  </code></pre>
  
  <p>I have 2 green squares on either side, one causes a scrollbar, the other does not. You can only scroll the right one into view. any ideas as to why?</p>