Introduction to Dynamic HTML: Dynamic Positioning

A Web developer may wear many hats -- writer, editor, programmer, and artist. As artists, we care how content is positioned on the page, whether for navigational or aesthetic purposes. Using DHTML, you can define a block of HTML content and precisely position it on the page.

There are two ways to position a block of content: Netscape's <LAYER> tag or Cascading Style Sheet Positioning (CSSP). Although Netscape's proprietary tag is simple to use, it is only supported within Netscape. Alternatively, CSSP is supported by both Netscape and Microsoft, so we will look at positioning using the style sheet syntax. There is no real loss of functionality, as layers and CSSP blocks behave nearly identically.

Hitting the Spot

Typically, a block of content is contained within <DIV> tags. Imagine, then, that you would like to create a small block of content -- an image plus a mailto hyperlink:

	<DIV>
	<A HREF="mailto:me@myhouse.com">Mailme!</A><BR>
	<IMG 	SRC	= "mailbox.gif"
		width	= 30
		height	= 15
		alt	= 'Mailbox'
		>
	</DIV>

To position this block, however, you must tell the <DIV> block to use a style sheet. A style sheet, as you may know, defines display characteristics. Style sheets can either be pre-defined, and applied to tags as style sheet classes, or defined on-the-fly. Typically, when using CSS Positioning, you define the block's style on-the-fly. We do this by using the STYLE attribute for the <DIV> tag. The STYLE attribute contains a string which lists each desired style property and its value. For example:

	<DIV ID="mailblock"
		STYLE="position:absolute;
		width:auto;
		height:auto;
		left:400px;
		top:50px;
		background-color:white;">

	<A HREF="mailto:me@myhouse.com">Mail me!</A><BR>

	<IMG 	SRC	= "mailbox.gif"
		width	= 30
		height	= 15
		alt	= "Mailbox"
		>

	</DIV>

In the above example, we've first added the ID attribute to assign an identifier to this content block. This may become useful later when manipulating this block using JavaScript. Next, the STYLE attribute contains a list of property parameters and values. Notice that a colon separates the parameter (left) from the value (right) and a semicolon separates each parameter/value pair from the next. In this case, we've specified that mailblock should be absolutely positioned on the page (meaning that it is not fixed relative to the position of any other page elements), with automatic width and height, 400 pixels right from the left edge of the browser's content window and 50 pixels down from the top edge of the browser's content window.

Simple enough -- except for one bit of trouble: we don't know the size of the user's screen or browser window! Thus, we don't really know where 400 pixels to the right will land this block relative to the rest of the page. This could result in an ugly layout. The solution to precise, but adaptable, layouts is to use relative positioning. Imagine, for example, that we want mailblock to appear slightly indented leftwards from the upper-right corner of the page. To achieve this position, we will create a two-level <DIV> block -- a parent and a child:

	<DIV ID="mailblock_parent"
		ALIGN="right">
	<DIV ID="mailblock_child"
		STYLE="position:relative;
		width:auto;
		height:auto;
		left:-10px; top:0px;
		background-color:white;">
	<A HREF="mailto:me@myhouse.com">Mail me!</A><BR>
	<IMG 	SRC	= "mailbox.gif"
		width	= 30
		height	= 15
		alt	= "Mailbox"
		>
	</DIV>
	</DIV>

In this example, the parent <DIV> block contains, as a child <DIV> block, the content for the mailto link and image. The parent block is aligned to the right edge of the page. The child block, which contains the actual content, is dynamically positioned relative to the parent, 10 pixels to the left of the parent's left edge.

Introduction to Dynamic HTML: The Old Standard about Standards
Introduction to Dynamic HTML
Introduction to Dynamic HTML: Properties of STYLE