Scrollable content areas with CSS

Although iframes can be useful for practical reasons, many designers use them for aesthetic
reasons, in order to provide a lot of information on a single page. For example,
iframes are popular for lists of news items because they enable many hundreds of lines of
text to be contained in a small area. However, if this is your reason for using an iframe,
you’re better off replacing it with a div and using CSS to control the overflow. If you use
this method, the content will remain part of the web page, which is better for accessibility
and site maintenance.
To do this, create a div with a unique class value:
<div class="scrollableContent">
[content...]
</div>
Then style it in CSS—the rule provides the div’s dimensions and determines how the div’s
overflow works:
.scrollableContent {
width: 200px;
height: 200px;
overflow: auto;
}
When overflow is set to auto, scroll bars only appear when the content is too large for the
set dimensions of the div. Other available values are hidden (display no scroll bars),
scroll (permanently display both scroll bars), and visible (render content outside of the
defined box area). Adding some padding, especially at the right-hand side of the scrollable
content box, helps improve the area aesthetically, ensuring that content doesn’t hug the
scroll bar.
.scrollableContent {
width: 200px;
height: 200px;
overflow: auto;
padding: 0 10px 0 0;
}
Note that by also using PHP includes (see PHP Solutions, by David Powers, for more on
those), you can even make scrollable content separate from the main web page, thereby
emulating another aspect of an iframe, but without resorting to using frames at all.
<div class="scrollableContent">
<?php @include $_SERVER['DOCUMENT_ROOT'] .
å "/include/document-name.php"; ?>
</div>
In this code block, @ suppresses errors, so if it didn’t work, you’d receive no indication—
removing @ would show any errors. Also, the document root setting sets the include to
take the HTML/document root instead of the server root as the starting point for looking
for the included file (when the file path starts with a /), so be aware of that when defining
paths. An alternative would be to use a relative path, such as include/document-name.
php. This would work without pointing to the server at the document root (so long as the
path was correct).
Another more accessible option than using iframe elements is to use the object element
to embed an external HTML document within a region of the page—when combined with
the scrolling div method shown in this section, it pretty much provides all the benefits of
an iframe with very few of the drawbacks (the content is on the page, unlike with frames
and iframes—their content remains external).
The following code block shows how an object element can be added to the page. Note
the alternate content within the object element, displayed if the browser cannot show the
object. This can be used to directly link to the file in the data attribute.
<object data="a-file.html" type="text/html">
<p>[alternate content]</p>
</object>
Like other elements, the object element can be styled using CSS, although Internet
Explorer adds a border, so you need to overwrite existing border settings using conditional
comments (see Chapter 9 for more on those) to prevent a double border. Also, if the content
is too large for the object dimensions, it will scroll in whatever direction is needed,
unless you explicitly set overflow to hidden; however, this setting doesn’t work in Internet
Explorer and Opera.