Web Development optimize

How do I... Create a scrolling content box in CSS?


In my last TechRepublic Programming and Development blog entry, I showed you how to use Flash to create an animation that mimicked the behavior of the retired (and sometimes reviled) <marquee> tag. I had mentioned that it was possible to use CSS to duplicate the <marquee> tag as well, but only if it were coupled with a few lines of knotty JavaScript.

However, there is an alternative CSS markup that will let you confine large blocks of content to a set width and height and let you scroll through them using a scrollbar control. This gives the effect of viewing content in a frame (remember those?), but the scrolling box stays put on one page and you can place it anywhere in your layout that you wish. This gives both you and your clients much more control over how you view your Web pages. All of my clients like this layout solution, and I bet yours will as well.

This blog post is also available in PDF format as a TechRepublic download, which includes a sample Web page and the example code.

Start

Open your preferred HTML editor and create a new page. Enter the code in Listing A to get started.

Listing A

<html>

<head>

<title>Scrolling Content Box</title>

<body>

</body>

</html>
Let's go ahead and place some formatted text in the Body of the HTML document, so we can see the effects of our CSS code as we build it (Listing B). Place a significant amount of text into the page. This will give us plenty of text to scroll through when the page is complete.

Listing B

<html>

<head>

<title> Scrolling Content Box </title>

</head>

<body>

"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."

</body>

</html>

Our text is in place, but let's go ahead and assign the CSS class to it. Even though the CSS markup has not been coded yet, by assigning the style to the text, you can preview the HTML you are writing at any time to see how the styling is built step by step.

We'll name our style class "scrollBox" in a couple of steps, so assign a <div> tag with that attribute as shown in Listing C.

Listing C

<html>

<head>

<title> Scrolling Content Box </title>

</head>

<body>

<div class="scrollBox">

"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."

</div>

</body>

</html>
Now that our content is in place, it's time to create your CSS code in the head of the document Declare the style and place it immediately after the closing </TITLE> tag. (Listing D)

Listing D

<html>

<head>

<title> Scrolling Content Box </title>

<style type="text/css">

<!--

-->

</style>

</head>

<body>

<div class="scrollBox">

"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."

</div>

</body>

</html>
The next step is to declare a class name for the scrolling box style. Let's keep things simple and name it "scrollBox" by typing in the new code in Listing E.

Listing E

<html>

<head>

<title> Scrolling Content Box </title>

<style type="text/css">

<!-

.scrollBox {

}

-->

</style>

</head>

<body>

<div class="scrollBox">

"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."

</div>

</body>

</html>

Now we have to assign some attributes to the scrollBox class. Let's start by defining how the text itself should look. Helvetica is back in style, and 10 pixels high with a line height of 12 pixels should look fine.

Listing F

<html>

<head>

<title> Scrolling Content Box </title>

<style type="text/css">

<!-

.scrollBox {

font-family: Helvetica, sans-serif;

font-size: 10px;

line-height: 12px;

}

-->

</style>

</head>

<body>

<div class="scrollBox">

"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."

</div>

</body>

</html>
The font is typeset to satisfaction. The next step is to determine how wide and tall the containing box will be. Type in the code in Listing G to give the box a width of 200 pixels and a height of 150 pixels.

Listing G

<html>

<head>

<title> Scrolling Content Box </title>

<style type="text/css">

<!-

.scrollBox {

font-family: Helvetica, sans-serif;

font-size: 10px;

line-height: 12px;

height: 150px;

width: 200px;

}

-->

</style>

</head>

<body>

<div class="scrollBox">

"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."

</div>

</body>

</html>
If we were to just leave the styling alone here, the type would butt up against the scrollbar when it is viewed in the Web browser. Enter the additional code in Listing H to give the type some padding along all edges of the containing box.

Listing H

<html>

<head>

<title> Scrolling Content Box </title>

<style type="text/css">

<!-

.scrollBox {

font-family: Helvetica, sans-serif;

font-size: 10px;

line-height: 12px;

height: 150px;

width: 200px;

padding: 5px;

}

-->

</style>

</head>

<body>

<div class="scrollBox">

"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."

</div>

</body>

</html>
One last bit of graphic design before we move on to the scroll functionality. Give the box a light blue background using the additional markup shown in Listing I.

Listing I

<html>

<head>

<title> Scrolling Content Box </title>

<style type="text/css">

<!-

.scrollBox {

font-family: Helvetica, sans-serif;

font-size: 10px;

line-height: 12px;

height: 150px;

width: 200px;

padding: 5px;

background-color: #CCCCFF;

}

-->

</style>

</head>

<body>

<div class="scrollBox">

"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."

</div>

</body>

</html>
Now, if you previewed your code thus far in a Web browser, you would see that the enormous block of text would be in a blue box, but it would be cut off after several lines. This is due to the height attribute. Therefore, we need a line of markup (shown in Listing J) that tells the browser to allow us to see the text beyond that height limit. This is done with the overflow rule and we'll set its attribute to auto, which will tell the browser to show the scrollbar controls as needed.

Listing J

<html>

<head>

<title> Scrolling Content Box </title>

<style type="text/css">

<!-

.scrollBox {

font-family: Helvetica, sans-serif;

font-size: 10px;

line-height: 12px;

height: 150px;

width: 200px;

padding: 5px;

background-color: #CCCCFF;

overflow: auto;

}

-->

</style>

</head>

<body>

<div class="scrollBox">

"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."

</div>

</body>

</html>

Preview the page in several browsers across operating systems to see how they display the design markup and scrollbar controls.

Since scrollBox is a CSS class, it can be styled even further and it can be applied to any HTML element, not just blocks of text. Try applying it to <img> tags, for example, to create scroll box containers for high-resolution images.

John Lee is a consultant specializing in design and illustration and a freelance technical writer. You can visit his Web site at johnleestudio.com.

9 comments
gkeller
gkeller

Excellent Article! Clear, concise and very well layed out. I can already think of several places that I'll be using this. Thank you very much.

dbomestar
dbomestar

Yes, this is great technique if you don't have enought of space.

Jaqui
Jaqui

an entire page as well I used that same feature to keep the page header and footer on my site fixed in place with the content scrolling. Though I have since changed my site, I do still have the css. Here it is: [pre] body { border: 0pt none ; margin: 0pt; padding: 0pt; background: #eeeeee repeat scroll 0% 50%; height: 100%; max-height: 100%; font-family: arial,verdana,sans-serif; font-size: 76%; overflow: hidden; } * html body { padding: 180px 0pt 50px; background-color: #eeeeee; } #container { padding: 20px; background: #eeeeee repeat scroll 0% 50%; font-family: "times new roman",serif; font-size: 1.2em; position: fixed; top: 200px; left: 0pt; bottom: 50px; right: 0pt; overflow: auto; text-align: left; } * html #container { height: 100%; width: 100%; background-color: #eeeeee; } #header { border-bottom: 1px solid #73a2bd; background: #88aacc repeat scroll 0% 50%; position: absolute; top: 0pt; left: 0pt; width: 100%; height: 200px; overflow: auto; text-align: center; } * html #header { height: 200px; } #header ul { border-top: 1px solid rgb(115, 162, 189); clear: both; text-align: center; } #header ul { margin: 0pt; padding: 0pt; background: transparent repeat scroll 0% 50%; list-style-type: none; height: 3em; } #header ul li { display: inline; color: rgb(115, 162, 189); font-size: 1.3em; } #header img { margin: 0px 0px 0pt; } #footer { border-top: 1px solid #73a2bd; background: #88aacc repeat scroll 0% 50%; position: absolute; bottom: 0pt; left: 0pt; width: 100%; height: 50px; overflow: auto; text-align: center; } * html #footer { height: 50px; } h1 { margin: 0pt; padding: 0pt; font-size: 3em; } #footer p { margin: 0px 0px 0pt; color: #73a2bd; } #container img { margin: 0px; } .columnone { width: 15%; float: left; text-align: left; margin-right: 2%; } .columntwo { width: 70%; float: left; text-align: left; margin-right: 2%; } .columnthree { width: 15%; float: right; text-align: right; margin-left: 2%; } [/pre] This is the html that implements it: [pre] [ ?xml version="1.0" ? ] [ !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"] [ html xmlns="http://www.w3.org/1999/xhtml" lang="en"] [ head ] [meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /] [title][/title] [meta content="Jaqui Greenlees" name="author" /] [meta name="description" content="" /] [meta name="keywords" content="" /] [meta http-equiv="Content-Style-Type" content="text/css" /] [link rel="stylesheet" media="all" type="text/css" href="css/fixed.css"/] [/head] [body] [div id="header"] [img src="images/name.png" alt="Jaqui Greenlees"/] [h2]Contact Me[/h2] [ul] [li][a href="index.html"]Home[/a] | [/li] [li][a href="software.html"]Software[/a] | [/li] [li][a href="consulting.html"]Consulting[/a] | [/li] [li][a href="webdesign.html"]Web Design[/a] | [/li] [li][a href="privacy.html"]Privacy Policy[/a] | [/li] [li][a href="about.html"]About Me[/a] | [/li] [li][a href="files.html"]Downloads[/a] | [/li] [li][a href="video.html"]Videos[/a] | [/li] [li][a href="links.html"]Links[/a][/li] [/ul] [/div] [div id="container"] [div class="columnone"] [p][/p] [/div] [div class="columntwo"] [p]Column one and column three divs being empty but for the paragrapgh tags centers this section to the middle of the browser window.[/p] [p]by adding lots of content in paragraphs, we can get the whole main content areas of the page to scroll up.[/p] [p]but the navigation and site header stays on the screen.[/p] [p]as does the footer of the site.[/p] [p]and yes, the code does validate. both the css and html.[/p] [/div] [div class="columnthree"] [p][/p] [/div] [/div] [div id="footer"] [a href="http://validator.w3.org/check?uri=referer"] [img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /][/a] [a href="http://jigsaw.w3.org/css-validator/check/referer"] [img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /] [/a] Copyright ? 2006 Jaqui Greenlees all rights reserved. [/div] [/body][/html] [/pre]

steven.taylor
steven.taylor

I had not known about the overflow attribute. While it's been a while, the last time I needed something like this I used iframes...this is much cleaner...Nice tip. While this is very subjective, I changed the style slightly: .scrollBox { font-family: Helvetica, sans-serif; font-size: 8pt; line-height: 12pt; height: 200px; width: 200px; padding: 10px; background-color: #d8d8d8; overflow:auto; } You gotta love getting paid to do this kind of work!

egpor95
egpor95

I have created several pages for my company's intra net using the above scrollbox tip. They all work flawlessly in Firefox but in IE there is a large, sometimes huge, gap between the content at the top of the page and the top of the scrollbox. Unless you know to scroll down the page you would not know it is there. Am I missing something that is IE specific to make it work or is Micro$oft being its usual stubborn "do it my way" self? Gene

terryd64
terryd64

This sample shows a great use for this type of markup. Clean sample, easy to uderstand. Thanks for showing the power of CSS.

Justin James
Justin James

I was trying for a different effect entirely, and stumbled across this one in the process. It's a good trick on occassion. :) J.Ja

Jaqui
Jaqui

if you remove the nofollow that the TR script put in, those links become navigation links, in the html I posted. I got the inspiration for that from CSS PLaY A site owned by Stu Nucholls: http://www.cssplay.co.uk/