How to make horizontal scrolling content with CSS

[Madcore]

Hi there. First post on this land.

I´m trying to do a horizontal scrollable thumbnails list, whit non-wrapped non-break content. But the thumbnails always break at the end of the defined div, making the content vertical scrollable.

I use an unordered list with each thumbnail inside it own list element. Defined only the height of the ul, and mark overflow as auto. Also tried to wrap the ul inside a div, but stills fail.

Someone can help me to achieve this?.

Thanks for your time.

[Mottie]

Hi Madcore!

All that’s missing is setting the width of the UL to fit all of the list items. Sadly setting it to 100% won’t work. Check out this demo.

ul {

width: 1500px; /* combined width of all LI's */

height: 200px;

margin: 0;

padding: 0;

}

li {

float: left;

}

Edit: Oh I just realized you probably don’t want it to scroll off the page. So just wrap the UL in a div that has whatever dimensions you want, with overflow set as follows (demo #2)

overflow-x: scroll;

overflow-y: hidden;

[Madcore]

Thanks Mottie. It works like a charm. But still have a problem there.

It works for a specific fixed width declared in the css. The problem is that the thumbnail list is not width fixed. The width grows for each new thumbnail for entry posted. I think going to need some Jquery or something else, because I see that with css only, works wiith fixed width only.

Anyway, thanks again Mottie. That solves me a great way.

[Madcore]

Eric, you´re my hero!!!!

With the web you posted here, it´s works fine!!!

Thanks a lot.

[dhechler]

Eric, you could have been nicer about that. What if he didn’t see your link? Your comment sounded really critical and harsh.

[justperfectgym]

You saved me!
They are all the same width? I mean the pictures must be from the beggining the same width?

[Mottie]

@Eric, it’s not showing now, but yesterday when I looked at the time stamps they were exactly the same… 8:32 or something like that. He probably didn’t reload the page after posting, so that’s likely why he missed it.

[Carrara]

Hey guys, reopening this thread a little if you don’t mind…

I´ve been trying this stuff out and I get it to work.. BUT.. there´s a black dot on each one of my images except of the last one.. And ideas why that is? And how to remove it?

[Carrara]

I´ve made some changes to this original one so that I only show one image at the time:

.window {
    width: 365px;
    height: 192px;
    overflow-x: scroll;
    overflow-y: hidden;
}

ul {
    width: 1825px;
    height: 192px;
    margin: 0;
    padding: 0;
}

li {
    float: left;
}

Still showing the black DOT.. Why why why :'( Im using Safari btw…

[vizzlearn]

@carara modify the list style property in ul style to list-style-type: none will remove the dot.

.window {
    width: 365px;
    height: 192px;
    overflow-x: scroll;
    overflow-y: hidden;
}

ul {
    width: 1825px;
    height: 192px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

li {
    float: left;
}

[Author]

Posts