CSS Scroller - Horizontal Scrolling Div Tutorial
The easiest way to give a container a horizonatal scrollbar, is to give the outer container overflow:auto and the inner container a larger width than it's parent. However, that simple solution is messy, limiting, and unflexable. Therefore, I'm going to present four equally clever methods to create a CSS Scroller while maintaining a widthless inner container. Thereby, giving you the flexibility to add or remove an unlimited amount of inner elements without having to adjust the width of the inner container each time. This idea may seem somewhat easy, but I assure you, it is not! Paul O'B wrote a excellent tutorial on the subject documenting two ways to do this. I would urge you to read it! And Erik.J over at SitePoint Forums posted the third very clever way to create a CSS Scroller.
For inline elements, you only need {white-space:nowrap;}. Therefore, if your only putting images (an inline element) inside your scroller, then this is all that is needed and as simple as it gets!
If you want to have centered captions below your images, then things start to get a little more complicated. Because, white-space:nowrap will not work on block level (or floated) elements. Therefore, this method uses {display:table; and display:table-cell;} for capable browsers, and {display:inline-block; display:inline;} (the Trip Switch) for IE.
This produces the same results as method #2 and method #4 but uses {display:-moz-inline-box; and display:inline-block;} for capable browsers, and {display:inline;} for IE. Note though, display:-moz-inline-box is a Vendor Specific Extension and not valid CSS.
I believe, this is the simplest, and therefore, my favorite method of the bunch. Not to mention - it's completely hack free! It's using a floated inner container (the ul) and a large negative right margin {float:left; and margin-right:-999em;} to create the CSS Scroller!
...and add a little JS!
Now, if I just stopped there, I would not of created anything new - there's no fun in that! So, let's dress it up a little bit by adding some javascript to get rid of that ugly stock scrollbar. There are some that will say "don't change people's scrollbars". Well, to them I will say "SHUT-UP and go use one of the previous examples then!". Each of the below examples degrades perfect in all browsers. When JS is off (or not supported) then it just defaults back to the stock scrollbar - no harm done! Although, I found this script to be little sensitive when using the following techniques. Therefore, in order to provide a cross browser custom scrollbar (that also degraded perfect) I had to tweak a thing or two in each. Nothing big, just a random position:relative there, or a display:inline here. No more than two clean tweaks in each!
THE SET-UP IS EASY - just do this! Downlaod the "fleXcroll" here >> save the script as flexcroll.js and link to it in the head of your page >> add class="flexcroll" to the container with the scrollbar >> and then just include the fleXcroll CSS in your CSS style sheet. Walla!
This is the simple version, shone here with the pretty scrollbar and only images.
This one comes with the captions and is using display:inline in lieu of display:table. Yes you can switch it like that in example #2 as well. Actually, it seems you can remove display:table (or display:inline) in all browsers except in FX3. FX has an inital load page bug - after page reload it's fine.
Which brings us to the final example. This one is my bread and butter - my one and only - the one that I will choose to use when the time comes. This one just needed some position:relative thrown in for IE6. I had fun making these, and I hope that you find them useful!
