CSS

CSS + DIV = Scrollable area for site content

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!

Chris Pietschmann
Chris Pietschmann
Cloud Infra & Security | Microsoft MVP | HashiCorp Ambassador | MCT | Developer | Author

I am a solution architect, SRE, developer, trainer and author. With 25 years of experience in the Software Development industry that includes working as a Consultant and Trainer in a wide array of different industries.