PROPERTY: overflow

overflow : auto | hidden | scroll | visible
 
Version: Level 2
Inherited: No
 
The overflow property allows you to select whether an over-sized element in a containing block is clipped or not.
 
A containing block is simply an element that contains related sub-elements. A problem arises if a sub-element is too big in size to fit inside the dimensions of the containing block. By default, when an element is too large to fit in the allotted space, portions will be chopped off so that the remaining portion of the element will fit inside the containing box. The portions that are chopped off are simply not displayed.
 
The clip property allows you to specify what portion of the over-sized sub-element will be visible. This is referred to as clipping the sub-element.
 
auto
 
The auto value allows the over-sized element to be clipped and scroll bars to be used to see the rest of the element.
 
hidden
 
The hidden value dictates that only the clipped portion of an over-sized element will be visible. It will be completely contained inside the containing block, and scroll bars will not be displayed.
 
scroll
 
The scroll value dictates that the over-sized element is clipped and that scroll bars will be displayed that allow you to view the rest of the element by scrolling.
 
visible
 
The visible value dictates that the over-sized element is not clipped. The entire element will be displayed even though it extends beyond the boundaries of the containing block. If this value is selected, then setting the clip property should have no effect.
 
Code:
div.over {
overflow: scroll;
height: 100px;
width: 100px;
}
...
<div class="over">
<img src="images/clouds.gif">
</div>

 
Output:



Copyright 1999-2001 by Infinite Software Solutions, Inc. All rights reserved.
Trademark Information