Go Back to Dynamic Site Solutions :: CSS

Scrolling Block Level Elements

This <div> has overflow:scroll; set which causes the scrollbar(s) to always be visible. By putting the content in a <p> inside the <div> we avoid the Mozilla Gecko (which includes Netscape 6+ and Firefox) bug where the bottom padding is missing, the problems caused by IE's faulty box model, and the bug in IE4/Win where the left and right padding is missing.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porta odio ullamcorper lorem. Sed consequat, diam ut malesuada tincidunt, metus libero tincidunt neque, non viverra lectus libero at dui. Aenean in neque id dui ullamcorper malesuada. Nullam sed wisi. Donec urna lectus, sagittis vitae, accumsan vitae, convallis non, elit. Vestibulum commodo pede non neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas est diam, tristique id, sollicitudin nec, aliquam non, orci. Quisque nibh erat, vulputate vitae, tempus suscipit, tincidunt vitae, quam. Donec at sapien vel sem consequat tincidunt. Suspendisse feugiat. Phasellus suscipit.

This <div> has overflow:auto; set which causes scrollbar(s) to appear if the element's content exceeds the width and/or height specified for the element. Resize your browser window to see how they act differently.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porta odio ullamcorper lorem. Sed consequat, diam ut malesuada tincidunt, metus libero tincidunt neque, non viverra lectus libero at dui. Aenean in neque id dui ullamcorper malesuada. Nullam sed wisi. Donec urna lectus, sagittis vitae, accumsan vitae, convallis non, elit. Vestibulum commodo pede non neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas est diam, tristique id, sollicitudin nec, aliquam non, orci. Quisque nibh erat, vulputate vitae, tempus suscipit, tincidunt vitae, quam. Donec at sapien vel sem consequat tincidunt. Suspendisse feugiat. Phasellus suscipit.

Related Links: