The Overflow Property

What happens when an element has a certain width, but one of its children is wider? From the formula in Figure 8.17, it follows that one of the margins must be negative. Margins can indeed be negative, so formally speaking, this is a perfectly valid situation. The result is that the child will stick out of its parent, usually at the right-hand side.

But, you may not want the child to stick out. If you don't want to change the width of the child either, a different solution has to be found. CSS offers two solutions, in addition to the default behavior:

• The part that sticks out is simply cut off and not displayed.

• A scroll bar (or something else with a similar function) is displayed so the user can move the child element sideways.

• The initial situation: The child element is allowed to stick out.

The same may happen in the vertical direction if the height of an element has been set to a fixed value. The property that determines the behavior is overflow.

Name:	overflow
Value:	visible | hidden | scroll | auto
Initial:	visible
Applies to:	block level and replaced elements
Inherited:	no
Percentages:	N/A

Visible is the normal style: The children of this element may stick out. Hidden makes the parts that would stick out invisible. This is not useful if the child elements can contain text, but if there is only an image inside, this may be the right thing to do. Scroll and auto both make a scroll bar or some such mechanism appear. The difference is that, in the case of scroll, the scroll bar is always there, even if none of the children is too large, while in the case of auto, the scroll bar appears only when there is actually something to scroll.