From CDOT Wiki
Revision as of 23:35, 6 December 2006 by RichardChu (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

This document is a work in progress and is subject to change.


The overflow property specifies whether the content of a block-level or replaced element is clipped when it overflows the element's box. The overflow property affects the clipping of all of the element's content but it does not affect any descendant elements respective content and descendants.

In CSS 3, Overflow is a shorthand property for the overflow-x and overflow-y properties. It sets those properties to the same value.

Applicability:The overflow property affects non-replaced block-level elements, table cells, and inline-block elements.
Media Group: Visual


TARGET_ELEMENT{ overflow: visible|hidden|scroll|auto }

Legal Values

The legal values of the visiblity property are:

  • visible: This value indicates that content is not clipped and it may be rendered outside the element's box.
  • hidden: This value indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region.
  • scroll: This value indicates that the content is clipped and that if the user agent uses a scrolling mechanism that is visible on the screen, that mechanism should be displayed for a box whether or not any of its content is clipped.
  • auto: The behavior of the this value is user agent dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.

Mozilla Recommended Values

Usage Examples

/* Set the overflow to visible */
div { overflow: visible }
/* Set the overflow to hidden */ 
div{ overflow: hidden }
/* Set the overflow to scroll */
div { overflow: scroll }
/* Set the overflow to auto */
div { overflow: auto }


Specification Conformance

Browser Compatibility

See Also