Creating a Basic Horizontal Scrollable DIV region – Part One

Most web pages don’t really require the need to be wide, in fact most web pages are deliberately designed to fit within a maximum of 1000 pixels or less. The main reason is to maintain content within the viewable area of the screen, making the assumption that the base level of systems would support a screen that is 1024 pixels wide. Now, even though a computer screen is typically wider than tall, it’s more natural for a web page to extend downward indefinitely and web browsers can handle vertical scrolling, without much effort. Of course, there are times when you want to create a cool user interface that calls for a horizontally scrolling navigation bars of some kind. It sounds easy enough right? But as life would have it, trivial things sometimes turn out to be difficult. One easy way to create a horizontal region is to use an iFrame, but iFrames are not really within the same space as your web page, since, well, it’s a frame, and a completely separate html document. The ideal, would be to use DIV tags, and keep the structure completely within the same page.

Part one of this tutorial I will show you how to create a very basic horizontal region on a web page that accommodates the ability to scroll left and right. The example here doesn’t use anything more than HTML and CSS. The only extra thing I needed for this tutorial is an image, feel free to use your own, or grab the one I made, it’s simply a 100 x 75 jpg file.

OK, let’s get started.

Create the HTML page

The code is pretty basic, the thing to note in here are the <DIV> tags. The CSS isn’t in this code block yet. But notice how the DIV tags are structured. There is the overall container, the wrapper are for the scrollable region and one for the actual scrollable region.  

[sourcecode language=”html”]<br /><!DOCTYPE html><br /><html><br /> <head><br /> <title>Basic Horizontal Scrollable DIV</title><br /> </head><br /> <body><br /> <div id="container"><br /> <div id="scrollableAreaWrapper"><br /> <div id="scrollableDiv"><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> <a href="#"><img src="images/thumbnail.jpg" /></a><br /> </div><br /> </div><br /> </div><br /> </div><br /> </body><br /></html><br />[/sourcecode]

The DIVs are necessary to help layout the structure. It’s common practice to use an overall container DIV to help structure your page. The scrollableAreaWrapper DIV is the actual container that will contain the scrollbar, and within it, is the scrollableDiv, which will contain our content. The content, as you can see from the code, is just my thumbnail image repeated several times (Yeah, I know, pretty dull). If you actually preview this basic code in a brower, you won’t get much more than a series of images wrapping on the page.

Adding the CSS

Now time to make it work. We need to put in the CSS that will make it all function.

Add the following code into the <head> area after the <title> tag.

[sourcecode language=”css”]<br /><style><br />html {<br /> height: 100%;<br />}<br />body {<br /> margin:0px;<br /> height: 100%;<br />}<br />#container {<br /> background-color:#DDD;<br /> min-height: 100%;<br />}<br />#scrollableAreaWrapper {<br /> overflow:auto;<br /> width:100%;<br /> height:110px;<br /> background-color:blue;<br />}<br />#scrollableDiv {<br /> width: 5000px;<br /> margin:5px;<br />}<br />#scrollableDiv img {<br /> margin: 5px;<br /> float: left;<br /> border: 0px;<br />}<br /></style><br />[/sourcecode]

What’s all that do?  Well, the html, body, and #container styles are setup to allow the container div to fill the entire browser window. Notice all the height’s at 100% and the min-height of 100% in the container. Without these specifications, the container won’t scale to the max height of the window… Only to the height of whatever content is in the <DIV>. 

The rest of the styles are for the scrollable area. The overflow:auto in the scrollableAreaWrapper is what allows scrollbars to appear.

The scrollableDiv has a width of 5000px – yeah, I know, you’re thinking what the heck? You need to have this width be larger than the content area where my images will sit. Why? because it it is smaller, the content will actually wrap to a new line below what fits in the first row. We don’t want this. Specifying the width to be really wide, will help force the contents to spill beyond the width of the browser. The content spillage also in turn, forces the scrollableAreaWrapper to show us a horizontal scrollbar. 

That’s it! We’re done, we have a horizontally scrollable <DIV> region. Now, granted, it’s not very pretty, since the default scrollbars in a browser are pretty utilitarian and boring. There is also the problem of having to hardcode a width, which, if you put in a very large number, skews the size fo the scrollbar. Part 2, I’ll go into using jQuery to address these issues.

Update: A friend suggested I actually put a demo of the code up, so click here for a demo of the code in this tutorial.

Thanks for reading.