Css Overflow

It is sometimes useful to be able to add large amounts of content to a fixed area of the screen.

For example, suppose we want to set a div to have a height of 100px and a width of 200px, so that any text in the div must appear in that box.

The CSS overflow property will keep the box dimensions of the box fixed.
The CSS property is overflow:scroll; or overflow:auto;

Here is the CSS.

<div style='width:200px;height:80px;border:solid 1px red;overflow:scroll;'>

Here is some text in a box 200px wide and 100px high.
If there is too much text scrollbars are added.
This can be useful to save on screen real estate.

Note scrollbars are added automatically so we can view all information.


Exercise
Repeat the exercise and display a large image in a small div.