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

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>

Blank space after floated elements in horizontal scrolling div

I am trying to make a horizontally scrolling div with a series of videos floated next to each other, with the user scrolling across to see more videos. Everything is working, except there is a huge am

Scrolling tables horizontally without wrapping them in div

I wanted to enable horizontal scrolling on tables in my articles whenever their width exceeds the available width in webpage layout. I tried to achieve this with CSS only, but failed. So I had to wrap

Horizontally center div between two floated elements

JSFiddle example here. I’m trying to horizontally center the div class=filter-group in the example between two floated buttons, but failing. Help greatly appreciated. HTML: <div class=container

Wrapping a parent div around floated elements

I’m trying to get a div to wrap around a dynamic number of child elements and I’d like to do this without setting a value for the width of the parent. I’ve got the content wrapping by floating both th

CSS background scrolling horizontally [closed]

how do I make the page background scroll horizontally while scrolling the page vertically?? here is a working example to illustrate what I mean. http://www.hul.co.in/careers-jobs/

minimize rows after wrapping floated elements, but also minimize width

I have a toolbar, which has an arbitrary number of floated inline-block elements, of unknown arbitrary widths. As the browser window gets narrower, at some point these floated elements are going to

Forcing floated elements to run off-screen

I have floated elements in a DIV which wrap onto the next line. Instead of wrapping, I would like these elements to simply run off the screen. I’ve tried using white-space:nowrap without success. CSS

about overflow in css with floated elements

when you use overflow:hidden to the main wrapper that are contain floated element how does overflow fix the flow of floated element <html> when you use overflow:hidden to the main wrapper that a

css transition on three floated elements with relative width

i have a problem with hovering three floated elements with relative width and css3 transition set. Hovered element has 50% width, two remaining elements have 25% each, therefore all elements combined

Horizontally scrolling list of images

I’m trying to create a horizontally scrolling list. I’m going to replace this with a fancy version when Javascript is enabled, but I want the markup and css to look and work fine without Javascript on

Answers

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.

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;
}

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)

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.

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.

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>

I’ve also tried the suggested combination of display: inline-block; and white-space: nowrap; (but without float: left;) and it works perfectly.

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!