Extensible HyperText Markup Language

XHTML.com recommends: PSD to HTML Slicing Service

overflow

Definition

The overflow property specifies if content of a block-level element should be clipped when it is larger than the parent element. The screen shot below shows a div element that is 150px by 150px.

Screen shot of a Web browser showing a white square with a red border.

The screen shot below shows what happens when a div element contains an image that is larger than the dimensions of the div element.

Screen shot of a Web browser with showing a red square containing an image. The image is larger than the square and overlaps the square towards the bottom right.

The screen shot below shows what happens when a div element contains an image that is larger than the dimensions of the div element, and the overflow property is set to hidden.

Screen shot of a Web browser showing a red square with an image. The image is contained by the square and it appears to be clipped.

The screen shot below shows what happens when a div element contains an image that is larger than the dimensions of the div element, and the overflow property is set to scroll.

Screen shot of a Web browser showing a red square with a vertical an horizonal scroll bars. The red square contains an image.

Example

  1. div {
  2. width: 150px;
  3. height: 150px;
  4. border: 3px solid red;
  5. overflow: hidden;
  6. }

Characteristics

Possible values

visible
Content is not clipped by the rectangle of the parent element.
hidden
Content is clipped by the rectangle of the parent element.
scroll
Content is clipped by the rectangle of the parent element but scroll bars are provided to enable viewing of content outside the clipped region.
auto
Depends on Web browser.
inherit
Use the same computed value as the parent element for this property.

Default value

visible

Applies to

Block elements, th and td.

Inherited

No

See also