CSS: series of floated elements without wrapping but rather scrolling horizontally

Question

I'm working on a album viewer. At the top I want a horizontal container of all the image thumbnails. Right now all the thumbnails are wrapped in a div with float:left. I'm trying to figure out how to keep these thumbnails from wrapping to the next line when there are too many, but rather stay all in one horizontal row and use the scrollbar.

Here's my code: (I don't want to use tables)

<style type="text/css">     div {         overflow:hidden;     }     #frame {         width:600px;         padding:8px;         border:1px solid black;     }     #thumbnails_container {         height:75px;         border:1px solid black;         padding:4px;         overflow-x:scroll;     }     .thumbnail {         border:1px solid black;         margin-right:4px;         width:100px; height:75px;         float:left;     }     .thumbnail img {         width:100px; height:75px;     }     #current_image_container img {         width:600px;     } </style> <div id="frame">     <div id="thumbnails_container">         <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/glry-pixie-bob-kittens.jpg" alt="foo" /></div>         <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-1.jpg" alt="foo" /></div>         <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-3.jpg" alt="foo" /></div>         <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-Jan08.jpg" alt="foo" /></div>         <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery3.jpg" alt="foo" /></div>         <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery4.jpg" alt="foo" /></div>         <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten3.jpg" alt="foo" /></div>         <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten1.jpg" alt="foo" /></div>     </div>     <div id="current_image_container">         <img src="http://www.whitetailrun.com/Pixiebobs/PBkittenpics/shani-kits/Cats0031a.jpg" alt="foo" />     </div> </div> 

Answer 1

How about using display: inline-block this way you can use borders on the block elements and get the horizontal scroll bar.

#thumbnails_container {     height:75px;     border:1px solid black;     padding:4px;     overflow-x:scroll;     white-space: nowrap } .thumbnail {     border:1px solid black;     margin-right:4px;     width:100px; height:75px;     display: inline-block; } 

Answer 2

Did you try

white-space: nowrap; 

in your #thumbnails_container?