explodingboy

When creating a website, you may have a situation where you need to include far more content into a certain area than the design can really accommodate. An easy way to accomplish this is to create a scrolling div area that will automatically scroll when there is an overflow of content within the div. A great example of this method in action is on the 9rules community pages. A scrollable div is used on the right to display all of the sites within a single community in a limited amount of space.

The effect looks a lot like an iframe, but is not near as messy and is more search engine friendly. To recreate this effect, start by creating a normal div with all of the content you want to scroll within that div. To make the div display a scrollbar you must use the overflow element in the CSS. By simply adding “overflow: auto” to your styles, the div will then scroll when there is an overflow of content. Here is what your style sheet would look like for this div:


#scrollingdiv {
color: #333;
border: 1px solid #DDD;
padding: 5px;
width: 215px;
height: 150px;
overflow: auto;
}


Below are the results using the styles above: