title: css white-space:nowrap horizontal scroll bug
body: <p>I have the following markup</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      #outer
      {
          min-height: 100%;
          height: auto !important;
          height: 100%;
          width:100%;
          white-space:nowrap;
      }
  
      #inner
      {
          background-color:#CCCCCC;
          margin:0px 4px 0px 4px;
          padding:5px 5px 0px 5px;
          border:1px solid #9A9A9A;
          border-width:1px 1px 0px 1px;
      }
  
  &lt;/style&gt;
  
  &lt;div id="outer"&gt;
      &lt;div id="inner"&gt;
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When the browser is wide enough, it looks like this
  <img src="https://i.stack.imgur.com/lEDU3.png" alt="wide"></p>
  
  <p>When the browse is resized narrow, it looks like this
  <img src="https://i.stack.imgur.com/j7yD3.png" alt="narrow"></p>
  
  <p>I want the gray background of the narrow view to extend all the way to the right when I scroll. What about my markup and css is causing this unwanted effect (occurs in Chrome, FF3 and IE8)</p>