Multi-Scrollbars

When content exceeds available space in browser viewport, standard browser scrollbars appear. But what if you need to display a lot of content within a small space? The CSS property Overflow can be used to create a scrolling division. When Overflow is set to scroll, scrollbars remain visible at all times. When set to auto, they become visible when needed.

While this page may resemble Frames or Framesets, scrolling divisions are not the same thing.

NOTE: Multiple scrollbars may pose usability problems for some people.

CSS CODE:

#left {
overflow: auto; height: value in px
}

#content {
overflow: auto; height: value in px}

More CSS Background Examples:

Content Goes Here

The background image on this page is a photo of Half Dome taken from the valley floor at Yosemite National Park, California. To improve readability of text, I darkened the image several steps in Photoshop before optimizing it for the web. And then I added a semi-transparent dark green PNG to the background of this container.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.