Force to stay in one line with scroll bar

Question

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.

<div style="max-width: 680px; max-height: 200px; white-space: nowrap; overflow: AUTO;">
    <div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;">         
        <center>Ford Thunderbird Gallery</center>
        <a href="index.php?option=com_content&amp;id=127&amp;tmpl=component&amp;TB_iframe=true&amp;height=680&amp;width=680" target="gallery">      
            <img src="images/InstallationGallery/FordThunderbird/IMG_0016.png" width="200" >        
        </a>
    </div>  
    <div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;">         
        <center>2012 Ford Expedition Gallery</center>       
        <a href="index.php?option=com_content&amp;id=128&amp;tmpl=component&amp;TB_iframe=true&amp;height=680&amp;width=680" target="gallery">      
            <img src="images/InstallationGallery/2012Expedition/P1040672.jpg" width="200" >         
        </a>
    </div> 
</div> 
<iframe height="680" name="gallery" scrolling="no" width="680"></iframe>

Answer 1

Try working with display:table(-row)(-cell) instead of floating:

http://jsfiddle.net/DxZbV/1/

Oh and also try not to use inline styles - makes your code pretty messy and hard to handle...