HTML and CSS Reference
he overflow property is part of CSS2.1. The other two properties are part of CSS3, but are supported by all
browsers in current use (including IE 6). All three properties accept the values listed in Table 6-9 .
Table 6-9. Values Accepted by Overflow Properties
The content flows outside the box.
Content that is too big is clipped. No scrollbars are provided.
Content that is too big is clipped. Scrollbars are provided, even if not needed.
Scrollbars should be provided if the content is too big, but actual implementation is left up to
The overflow properties are not inherited, so you can also use the inherit keyword. In CSS3, it's proposed
that overflow should be a shorthand property for overflow-x and overflow-y . If one value is supplied, it applies
to both horizontal and vertical overflow. If two values are supplied, the first should apply to horizontal overflow,
and the second to vertical overflow.
■ At the time of this writing, browsers support overflow with only a single value. Using two values results
in the style rule being ignored. if you need to apply different values to horizontal and vertical overflow, set overflow-x
and overflow-y independently.
The ch06 folder contains six files that show how the overflow properties work. Each file contains five <div>
elements that are 150px wide and 200px high with a solid red border. To demonstrate the difference between text,
which wraps automatically, and images, the <div> elements in three files contain only text. The remaining files
contain a mixture of text and images.
In overflow.html and overflow_image.html, the overflow property has the following effects:
overflow is set to auto and the content is smaller than the box, no scrollbars are
overflow is set to auto and the content is larger than the box, text generates only
a vertical scrollbar. Because images can't be wrapped, both horizontal and vertical
scrollbars are generated when necessary.
overflow is set to hidden , no scrollbars are generated. Excess content is
overflow is set to scroll , horizontal and vertical scrollbars are always generated.
overflow is set to visible , excess content overlaps the box.
This is exactly what you would expect from the descriptions in Table 6-9 . However, using overflow-x and
overflow-y on their own produces some surprising results. Figure 6-22 shows how browsers handle overflow-x