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

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?

Answer 3

Instead of floating, try this:
#thumbnails_container {
height:75px;
border:1px solid black;
padding:4px;
overflow-x:scroll;
overflow-y: hidden;
}
.thumbnail {
border:1px solid black;
margin-right:4px;
width:100px; height:75px;
display: inline;
}
Remove the div { overflow:hidden; }, the rest stays the same.
It's a bit simpler and they'll span across and scroll like you want.

Answer 4

It is a common mistake thinking that setting the white-space property to "nowrap" also works on floated elements.
It only works on inline elements or inline-block elements.
I guess you need the floated elements to be a block, so you could turn them into inline blocks.
It is possible to gain it on all the browsers with some trick:
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
This solution opens a lot of new web-design sceneries to be explored, so I gratefully give the proper credits to the author:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
Here you can read a document which speaks of the white-space property and the floated elements:
http://reference.sitepoint.com/css/white-space
Cheers!

Answer 5

This is driving me nuts, can't figure it out.
This kinda works:
.thumbnail {
padding-right:4px;
width:100px; height:75px;
display: table-cell;
}
.thumbnail img {
border:1px solid black;
display: block;
width:100px; height:75px;
}
But I have no idea about browser support for display: table-cell;
Personally i would either make the thumbs vertical or use javascript (the browser scrollbar is ugly anyways)

Answer 6

I had the same problem a few months ago. I tried all solutions presented here. They don't work.
This is my solution:
Give the wrapper div the needed width fix (body will expand, too). Then put the content in the extra large wrapper container (float or inline). Now you can use the horizontal scrollbar of the window as scrollbar. Now everything else on the page (header, footer etc.) is scrolling with. You can give these containers position:fixed. Now they stay on there position, while you are scrolling the extra wide wrapper/body.

Answer 7

I would still prefer to be able to use block elements for the thumbnails tho so I can add borders and what not.
You can use "borders and whatnot" with display: inline-block elements. You can also use fixed with/height inline-block elements, so that your design is consistent.
Basically, make .thumbnail not-floated and display: inline-block, apply width/height, borders etc., and on #thumbnails_container use white-space: nowrap.

Answer 8

Add another container for the thumbnails and set it's width to the total width of all thumbnails (along with their margins, borders and padding). Look below at div named "thumbnails_scrollcontainer":
<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 id="thumbnails_scrollcontainer" style="width : 848px;">
<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>
<div id="current_image_container">
<img src="http://www.whitetailrun.com/Pixiebobs/PBkittenpics/shani-kits/Cats0031a.jpg" alt="foo" />
</div>
</div>

Answer 9

I know this is an old question now but this came up in a google search. I was trying to change a floated layout into a horizontal scrolled layout on mobile. None of the above worked for me. Instead I used the below which worked in my case:
main
{
display: flex;
max-width: 100%;
overflow-x: auto;
}
main .thumbnail
{
width: 400px;
flex-shrink: 0;
}

Answer 10

This way worked for me
main #thumbnailBox {
height: 154px;
width: auto;
overflow-x: scroll;
white-space: nowrap;}
main .thumbnail {
display: inline-block;}