QuickTip: Scrollable Divs

Christopher — Tue, 03 Oct 2006 12:46:14 +0000

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:

— Below is our scrolling content —

Line Item One
Line Item Two
Line Item Three
Line Item Four
Line Item Five

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ultricies neque id orci. Maecenas vitae nisi sed risus sollicitudin tincidunt. Vivamus massa. Donec in est vel pede molestie fringilla. Nam vitae ipsum. Sed venenatis hendrerit ipsum. Mauris sem justo, cursus nec, congue ac, consequat et, metus. Sed commodo sollicitudin velit. Nulla facilisi. Aenean placerat ante at urna. Donec a arcu.

ExplodingBoy » overflow

QuickTip: Scrollable Divs