CSS2 » Properties » overflow
Version: No
- Syntax:
- overflow : auto | hidden | scroll | visible
- 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.
- 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.
- 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.
- 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.
The overflow property allows you to select whether an over-sized element in a containing block is clipped or not. This property is not inherited.
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.
Examples
Code:
div.over {
overflow: scroll;
height: 100px;
width: 100px;
}
...
<div class="over">
<img src="/images/clouds.gif">
<img src="/images/clouds.gif">
<img src="/images/clouds.gif"><br />
<img src="/images/clouds.gif">
<img src="/images/clouds.gif">
<img src="/images/clouds.gif">
</div> Output:
Language(s): CSS2
See Also:
