Although horizontally scrolling content is usually frowned upon, in some circumstances, it is necessary and even desirable - for instance, take a look at Apple’s horizontal list of products on it’s site. On their site, they have made use of a combination of CSS to create the horizontally scrolling content, and JavaScript to skin the scrollbar to fit in with the website design.

To create the horizontally scrolling div, firstly, we need the following HTML:

<div id=”horizontal”>
<img src=”example1.jpg” alt=”" />
<img src=”example2.jpg” alt=”" />
<img src=”example3.jpg” alt=”" />
</div>

Now, we need some CSS:

#horizontal {width: 500px;
height: 200px;
overflow: auto;
white-space: nowrap;} Read the rest of this entry »