Quick Shot - Using CSS to Create a Scrolling Content Area - The Text Version

By: Jim Babbage

Page 1 of 1

Set for printing

Adding a scrolling region to your pages is pretty easy using CSS and DIV's, as we saw in my recent video tutorial. Having received a couple subscriber requests, though, I decided to make a simple written version of this process for our CMX Quick Shot series.

Figure 1 shows a simple CSS-based layout. I've added color to the header and footer so they're easier to see, even though they are not the focus of this tutorial. We have a wrapper div (to contain all the elements other than the footer), header, content and footer div's to structure the simple layout.

Figure 1 - Simple CSS layout

The sample files are available from the download link at the bottom of the page but I will warn you ahead of time, there is nothing earth shattering in either the code or the CSS.

The premise behind this technique is the desire to maintain a fixed page height, but not be limited by the content needed to go into the page. In this example we'll work directly on the content div to add a scroller.

I have already created some basic rules for the divs with the exception of the content div. We will do that now.

Click the New CSS Rule icon on the CSS panel, as seen in Figure 2.

Figure 2 - Click the "+" sign icon to add a new rule.

Choose the Advanced Selector type and key in "#content" as the id.

Figure 3 - Choose the appropriate selector type from the new CSS rule dialog box.

Press OK.

Choose the Box category within the CSS Rule Definition box. We need to set both width and height here. These are necessary to activate our scrollbars. Notice I made my width 10 pixels narrower than the wrapper width of 760 pixels. If we set the exact same width as the wrapper, the scrollbars will jump outside of the wrapper in Firefox.

Give the div a little padding along the sides and top so that the text doesn't butt up against the edges of the container, and set the left and right margins to auto just so things stay balanced. Remember in order to set auto margins, the div must have a width defined.

Switch to the Positioning category to add the finishing touches on our scroller. Note that our div dimensions are carried over.

The only thing we need to do here is set the Overflow item to auto. This will activate the scroll bars when there is more content than can be displayed in the current div's dimensions, vertically OR horizontally.

Press OK and you are returned to your document. Click inside the content div. Copy/paste, type or use a Lorem Ipsum generator to add eight or more paragraphs to the div. Save the page and preview it in a browser. Assuming you placed too much text, you should see your scroll bar. If you didn't place too much text, no scroll bar is displayed. Cool, eh?

Screen grab of page displayed within Firefox.

I hope this Quick Shot has helped to add another tool to your web design kit and you have seen how easy it is to add scrolling inline content to your pages.

Page 1 of 1 1

Download Support Files

Downloads are disabled during your trial period.

Dreamweaver, CSS, scrollable div, scrolling content, overflow