<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">bottom</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">6</span> IE <span class="emphasis">5</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>The CSS specification calls for this attribute to define the position
of the bottom edge of a positioned element's content
(exclusive of borders and margins) relative to the bottom edge of the
next outermost block content container. Of mainstream browsers, only
IE 5 for Macintosh behaves this way. IE for Windows and Netscape 6 do
something unexpected when the positioned element uses the root
positioning context: instead of using the bottom of the document as
the comparative edge, these browsers use the bottom of the browser
window space (the viewport in CSS terminology). As a result, the
precise bottom position of the element varies with the
user's browser window size. This discrepancy makes
it more practical to use the <span class="literal">bottom</span> property for a
positioned element nested inside another positioned element. When the
element is relative-positioned, the offset is based on the bottom
edge of the inline location of where the element would normally
appear in the content.
</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>bottom: <span class="replaceable">length</span> | <span class="replaceable">percentage</span> | auto</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>See the discussion about length values at the beginning of this
chapter. Negative lengths may be allowed in some contexts, but be
sure to test the results on all browsers. You may also specify a
percentage value, which is calculated based on the height of the next
outermost container. The setting of <span class="literal">auto</span> lets the
browser determine the bottom offset of the element box on its
naturally flowing offset within the containing box.
</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">auto</span></p>
					</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>All 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.bottom</pre>
						</span></td>
				</tr>
			</table>
		</div>
</body>
</html>