title: Can't get CSS Horizontal Scrolling to work
body: <p>I have a project I am working on where we want a number of panels next to each other and display a horizontal scroll bar if all of the panels cannot be shown on the screen at once (typical case). I have spent the day trying to prototype how this might work with some simple HTML and CSS, but I can't get it 100% there. I have tried this in both IE 9 and Chrome 29.x. Both render the same.</p>
  
  <p>Basically, I can't get the non-visible panels <strong>not to wrap</strong> to the next "line". But, (in the case of the markup below), Panel 5 is not visible as it has wrapped down. The HTML below is about as far as I can get with some important differences:</p>
  
  <ol>
  <li>Ultimately, I <strong>don't</strong> want to specify a width for #scrollBox (currently set to 1200px). We want to leave this open ended so that this area will always track and grow with the user's browser window.</li>
  <li>I am not sold on using  or  tags, they are just what I know and work in my overall design.</li>
  <li>Yes, currently fieldset.firstPanel and fieldset.otherPanel are identical, that may change in the future. same with div.firstPanel and div.otherPanel.</li>
  </ol>
  
  <p>Any help will be appreciated.</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Horizontal Scrolling Panels&lt;/title&gt;
      &lt;style type="text/css"&gt;
          fieldset.firstPanel {
              height: 200px;
              width: 300px;
              margin-right: 10px;
          }
          fieldset.otherPanel {
              height: 200px;
              width: 300px;
              margin-right: 10px;
          }
          div.firstPanel {
              height: 200px;
              width: 300px;
              float: left;
              display:inline-block;
          }
          div.otherPanel {
              height: 200px;
              width: 300px;
              float: left;
              display:inline-block;
          }
          #scrollBox {
              width: 1200px;
              height: 220px;
              overflow-x: auto;
              overflow-y: hidden;
              -ms-overflow-x: auto;
              -ms-overflow-y: hidden;
              white-space: nowrap;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form name="form1" method="post" action="Default.aspx" id="form1"&gt;
          &lt;div&gt;
              &lt;div id="scrollBox"&gt;
                  &lt;div class="firstPanel"&gt;
                      &lt;fieldset class="firstPanel"&gt;
                          &lt;legend&gt;Panel 1&lt;/legend&gt;
                      &lt;/fieldset&gt;
                  &lt;/div&gt;
                  &lt;div class="otherPanel"&gt;
                      &lt;fieldset class="otherPanel"&gt;
                          &lt;legend&gt;Panel 2&lt;/legend&gt;
                      &lt;/fieldset&gt;
                  &lt;/div&gt;
                  &lt;div class="otherPanel"&gt;
                      &lt;fieldset class="otherPanel"&gt;
                          &lt;legend&gt;Panel 3&lt;/legend&gt;
                      &lt;/fieldset&gt;
                  &lt;/div&gt;
                  &lt;div class="otherPanel"&gt;
                      &lt;fieldset class="otherPanel"&gt;
                          &lt;legend&gt;Panel 4&lt;/legend&gt;
                      &lt;/fieldset&gt;
                  &lt;/div&gt;
                  &lt;div class="otherPanel"&gt;
                      &lt;fieldset class="otherPanel"&gt;
                          &lt;legend&gt;Panel 5&lt;/legend&gt;
                      &lt;/fieldset&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>