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

Answer 1

This way worked for me

main #thumbnailBox {
height: 154px;
width: auto;
overflow-x: scroll;
white-space: nowrap;}

main .thumbnail {
display: inline-block;}

Answer 2

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 3

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 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!