CSS + DIV = Scrollable area for site content

Jul 25, 2006 • Chris Pietschmann  • CSS

Using the CSS Overflow property you can create a box of scrollable content in your page without using an IFrame. This means you can have the same visual and usability effect that an IFrame offers and still be search engine friendly.

Here’s an example:

It's just this simple to do.

It really is!

Isn't CSS great?

And, here’s the HTML and CSS code:

<div class="divParent">
    <div class="divChild">
        <p>It's just this simple to do.</p>
        <p>It really is!</p>
        <p>Isn't CSS great?</p>
    </div>
</div>
<style>
div.divParent {
    overflow: auto;
    border: blue 1px solid;
    width: 200px; 
    height: 50px
}
div.divChild {
    overflow: auto;
    width: 200px;
    height: 50px;
    border: solid 1px blue;
}
</style>

Happy styling!