close window

Example of Wide Content Confined using overflow:scroll

Style sheet

.elementBox { overflow: scroll; width: 600px; color: #000; background-color: #DDD; }   .wideContent { width: 670px; padding: 5px; margin: 10px; color: #000; background-color: #CFF; text-align: justify; }

This is the rendered result.

Both scroll bars are provided, whether or not the content calls for them.

The containing block is 600 pixels wide.

The total width of the "wideContent" DIV is 700 pixels, which exceeds the width of the containing block. This causes the content to spill out the side of the containing block. ... Donec tempus accumsan lorem. Proin turpis risus, accumsan eu, tempor at, pellentesque a, risus. Sed aliquet. Curabitur a est. Sed in enim. Quisque hendrerit enim sed tortor. Mauris vulputate imperdiet ipsum.

The containing block is 600 pixels wide.

close window