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 pose usability problems and can be confusing for site visitors.

Recommended use: Seldom if ever.

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 over image, I darkened the image several steps in Photoshop before optimizing it for the web. Despite my best efforts, content presented this way will still pose reading problems for many people. For accessibility reasons, I would probably never use this method on a production web site.

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.