title: IE7 Div Bug overflow:auto
body: <p>I need some help , I have an IE7 CSS issue (some clients still use IE7 so I need to code for it).</p>
  
  <p>I am having trouble with some nested divs and a horizontal scroll bar which works fine in IE8+ and everything else.</p>
  
  <p>What happens is, the overflow should create a horizontal scroll bar, so the content inside can expand beyond the edge of the screen.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="CenterBoxFlow Rounded" &gt;
   &lt;div class="CenterBoxContainer" id="panetest"&gt;
    .. Content
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.CenterBoxFlow { border: 1px #ccc solid; width: 1110px; white-space: normal; vertical-align: top; display: inline-block; overflow: visible; padding: 15px; margin-bottom: 6px; text-align: center; float: left; position:relative; }
  .CenterBoxContainer { text-align: left; width:1110px; overflow:auto; white-space:nowrap; vertical-align:top; overflow-y:hidden; display:inline-block; position:relative;  }
  </code></pre>
  
  <p>FYI, the content is also a series of divs with the following style:</p>
  
  <pre><code>.Chart_Small { padding: 5px; width: 152px; white-space: normal; display: inline-block; position: relative; *display: inline; zoom: 1; }
  </code></pre>
  
  <p>Any suggestions on getting the div to overflow properly in IE7 would be great.</p>
  
  <p>Peter.</p>