CSS: series of floated elements without wrapping but rather scrolling horizontally
Posted
by tybro0103
on Stack Overflow
See other posts from Stack Overflow
or by tybro0103
Published on 2010-03-03T17:14:18Z
Indexed on
2010/03/29
13:23 UTC
Read the original article
Hit count: 491
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>
© Stack Overflow or respective owner