CSS: series of floated elements without wrapping but rather scrolling horizontally
- by tybro0103
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>
