<html>
<link rel="stylesheet" href="josh.css">
<body bgcolor="#FFFFFF">
<div id="Description">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">overflow</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">6</span> IE <span class="emphasis">4</span> CSS <span class="emphasis">2</span></td>
				</tr>
				<tr>
					<td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal"></p>
					</td><td valign="top" nowrap class="requirements">Inherited: No</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description"><p>Defines how the element treats content with rendered dimensions that
exceed the specified height and/or width of the container. Except for
some types of content that demand a fixed width (a
<span class="literal">pre</span> element, for instance), the default behavior
of an element is to respect the <span class="literal">width</span> attribute
setting and handle the issue of overflow in the height of the
element. Assigning the <span class="literal">overflow</span> property to the
body element in an attempt to control the display of scroll bars is
risky business for cross-browser compatibility. Test your overflow
code thoroughly on IE for Windows (in backward- and
standards-compatible modes), IE for Macintosh, and Netscape 6.
</p><p>A setting of <span class="literal">visible</span> causes the containing block
to expand to allow the full width (if fixed) and height of the
content to be displayed. If borders, margins, and padding are set for
the element, they are preserved around the expanded content block. If
the element has height and width specified, as well as a background
image or color, and if the content extends beyond the specified size,
the results vary with browser family. IE for Windows expands the
height of the background to accommodate the content, pushing
succeeding content downward to accommodate the overflowing content.
IE for Macintosh and Netscape 6 constrain the background rectangle to
the specified size, but the content bleeds beyond the rectangle, and
overlaps content that comes after the overflowing element. Because
this is the default value for the <span class="literal">overflow</span> style
property, it is best to specify some other overflow value (or
clipping rectangle for a positioned element) whenever you restrict
the size of an element.
</p><p>A setting of <span class="literal">hidden</span> forces the block to observe
its height and width settings, potentially causing the content to be
clipped by the size of the block. Borders and padding are preserved,
but margins may be lost along the edges that clip the content. No
scrollbars appear with this value.
</p><p>A setting of <span class="literal">scroll</span> usually generates a set of
horizontal and vertical scrollbars inside the rectangle of the
content block, whether they're needed or not. The
bars become active only if the content actually requires scrolling in
any direction.
</p><p>A setting of <span class="literal">auto</span> should generate scroll bars only
if the content in the block requires it. In practice, browsers tend
to add only a vertical scrollbar when the content is text that can
adjust to the specified width of its container.
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="csssyntax"><span class="title">CSS Syntax</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>overflow: <span class="replaceable">overFlowType</span></pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="value"><span class="title">Value</span></td>
				</tr>
				<tr>
					<td><p>Any of the following constants: <span class="literal">auto</span> |
<span class="literal">hidden</span> | <span class="literal">scroll</span> |
<span class="literal">visible</span>.
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="initvalue"><span class="title">Initial Value</span></td>
				</tr>
				<tr>
					<td><p><span class="literal">visible</span></p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="example"><span class="title">Example</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>div.aside {position: absolute; top: 200px; left: 10px; height: 100px;
width: 150px; overflow: scroll}</pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="appliesto"><span class="title">Applies To</span></td>
				</tr>
				<tr>
					<td><p>Block-level, replaced, and positioned elements.</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="objectmodelreference"><span class="title">Object Model Reference</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>[window.]document.getElementById("<span class="replaceable">elementID</span>").style.overflow</pre>
						</span></td>
				</tr>
			</table>
		</div>
</body>
</html>