Create a scrollable area – CSS

Standard I-frame

Standard I-frame

You have no-doubt heard that using iframes is not very good for getting your on-page content fully indexed by search engine spiders. What a shame – they are fairly handy to have as they allow your to constrain a lot of visible content such as pictures and text, within a small and controllable area.

You will be glad to hear that there is a reliable CSS method for producing something very similar to an iframe, but without the problems associated with search engine indexing.

It is such a simple solution, you will be wondering why it isn’t used more…beats me!

CSS Scroller

Paste the following into the head section of your page’s HTML:

<style type=”text/css” media=”screen”>
.scroll   {
width: 100px;
height: 50px;
overflow: auto
}
</style>

Now, in the body section where you want your scroller to appear paste the following HTML:

Fig.1 Simple CSS Scrollable Area

Fig.1 Simple CSS Scrollable Area

<div class=”scroll”>
This is my CSS scrollable area
<br><br><br><br>
It should work nicely!
</div>

The effect is instant – but a little boring! (see fig.1). Let’s liven things up a little with CSS. Copy and paste the following CSS, replacing the CSS in your head section.

CSS scrollable area<style type=”text/css” media=”screen”>
.scroll      {
float:right;
background-color: #f0f0f0;
padding: 8px;
width: 100px;
height: 50px;
overflow: auto;
border: solid 1px #ccc
}
</style>

It couldn’t be simpler!