The Overflow Property
As discussed earlier, every element on the page
is a box. If the height of the box is not set, the
height of that box will grow as large as necessary
to accomodate the content.
This text is inside the div element, which
has a blue
background-color and is floated to the
left. We set a specific
height and width for the div element, and
as you can see,
the content cannot fit.
The CSS overflow property specifies the
behavior that occurs when an element's
content overflows the element's box.
The overflow Property Values
There are four values for the overflow property:
visible (the default value), scroll, hidden and
auto.
The value scroll results in clipped overflow, but a
scrollbar is added, so the rest of the content may
be seen.
This text is inside the div element, which
has a blue
background-color and is floated to the
left. We set a specific
height and width for the div element, and
as you can see,
the content is seen by scrolling.
The code above will produce both horizontal and
vertical scrollbars.
auto and hidden
auto - If overflow is clipped, a scroll-bar shoud be
added to make it possible to see the rest of the
content.
hidden - The overflow is clipped, and the rest of
the content will be invisible.
This text is inside the div element, which
has a blue
background-color and is floated to the
left. We set a specific
height and width for the div element, and
as you can see,
the content is occluded.
The default value for the overflow property is visible