title: Force <DIV> to stay in one line with scroll bar
body: <p>I am trying to have a selection area at the top of the window where several different page links exist. This will include so many links that each page will have an image. They will not fit into the width of the page, so I would like them to display on one row and have a scrollbar to the right so that users can scroll through a horizontal list and click whichever link of a page a user would like to view. When users click the link it ought to appear in the content area below the selection area. Please refer to the image for a visual reference.</p>
  
  <p><img src="https://i.stack.imgur.com/XpIru.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;div style="max-width: 680px; max-height: 200px; white-space: nowrap; overflow: AUTO;"&gt;
      &lt;div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;"&gt;         
          &lt;center&gt;Ford Thunderbird Gallery&lt;/center&gt;
          &lt;a href="index.php?option=com_content&amp;amp;id=127&amp;amp;tmpl=component&amp;amp;TB_iframe=true&amp;amp;height=680&amp;amp;width=680" target="gallery"&gt;      
              &lt;img src="images/InstallationGallery/FordThunderbird/IMG_0016.png" width="200" &gt;        
          &lt;/a&gt;
      &lt;/div&gt;  
      &lt;div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;"&gt;         
          &lt;center&gt;2012 Ford Expedition Gallery&lt;/center&gt;       
          &lt;a href="index.php?option=com_content&amp;amp;id=128&amp;amp;tmpl=component&amp;amp;TB_iframe=true&amp;amp;height=680&amp;amp;width=680" target="gallery"&gt;      
              &lt;img src="images/InstallationGallery/2012Expedition/P1040672.jpg" width="200" &gt;         
          &lt;/a&gt;
      &lt;/div&gt; 
  &lt;/div&gt; 
  &lt;iframe height="680" name="gallery" scrolling="no" width="680"&gt;&lt;/iframe&gt;
  </code></pre>