CSS Attributes Index   Positioning Properties

---

Sets or retrieves what should be done when the object’s content exceeds the height and/or width of the object.

CSS	{ overflow: 'visible' | 'scroll' | 'hidden' | 'auto' }
Script	object.style.overflow = sOverflow ]

visible	The content is not clipped.
scroll	The content is clipped. Scroll bars are added even if the content does not exceed the dimensions of the objects.
hidden	The content that exceeds the object’s dimensions is not shown.
auto	The content is clipped and scrolling is added only when necessary.

The property is read/write with a default value of visible; this attribute is not inherited.

For the TEXTAREA object, only the hidden value is valid. Setting the overflow to hidden on a TEXTAREA object hides its scroll bars.

Available on the Macintosh platform as of Microsoft^® Internet Explorer^® 5.

The following example uses an inline stylesheet that sets an element’s overflow attribute to automatically adjust itself when the page is loaded.

<div style="width:300; height:200; overflow:auto;">
. . . </div>

The sample below shows how a script is used to cycle through the different overflow values, when a button is clicked. The DIV's style is changed based on the existing style. A second DIV is used to display what the current settings are. The button value is changed to reflect what the overflow value will be when it is clicked.

<script language="JavaScript">
function chgFlow ( ) {
if ( theDiv.style.overflow=="auto" ) {
  theDiv.style.overflow="scroll";
  theSwitch.value="Click to set overflow to HIDDEN.";
  theFLow.innerHTML="Overflow is set to
    <b>scroll</b>.";
  return false;}
if ( theDiv.style.overflow=="scroll" ) {
:
}
</script>

 Show me 

overflowX, overflowY, position