CSS: series of floated elements without wrapping but rather scrolling horizontally
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;
}
Did you try
white-space: nowrap;
in your #thumbnails_container?
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.