Before you start
This tutorial is designed to assist Web developers who need tight control over the placement of content on their pages, but who understand the need to separate content from presentation in order to improve compliance with standards and ease of maintenance.
Dynamic positioning using DHTML provides complete flexibility in the placement of content on a page. However, using it can be like using a professional-grade camera -- to get the most out of it, you need to understand its nuances. Building pages using dynamic positioning requires an understanding of the normal page flow and the properties that can alter that flow or even remove items from it altogether. It also requires an understanding of the internal workings of individual items and the interdependencies of various properties.
This tutorial takes you through an introduction to the normal flow of a page, and explains how it can be altered to suit your purposes. It also shows you the details behind the process of laying out a DHTML page using dynamic positioning, including the different types of elements and how to use them to create a page that behaves just as you planned. Finally, this tutorial takes a brief look at scripting CSS properties related to positioning to give you the foundation you need to build your own scripts.
The tutorial assumes that you are already comfortable using HTML and Cascading Style Sheets (CSS). Basic knowledge of JavaScript is helpful, but not required, for understanding the scripting examples. You can gain a thorough understanding of the topic without trying out the scripting examples. (See Resources for tutorials that can get you up to speed on JavaScript and CSS.)
This tutorial helps you understand the topic even if you only read through the examples without trying them out. If you want to try the examples as you go through the tutorial, make sure you have the following tools installed and working properly:
- A text editor: DHTML files are simply text. To create and read them, a text editor is all you need.
- Microsoft Internet Explorer 5.5, or other CSS2-capable browser: Not all browsers are able to exploit all of the capabilities of dynamic positioning. The examples in this tutorial use IE 5.5, but other alternatives are available such as Netscape and Opera.

