CSS has the ability to position an "element" (or content) precisely on the page with far more accuracy and robustness than frames or tables allow. The "elements" that you can position are ...

• Blocks/box elements ... typically defined with a <div> tag
• Images
• Text elements
• Any othe content/media ... including Flash and Shockwave elements) placed inside a <div> tag

There are several ways in which CSS can achieve this ...

• by styling and positioning content inside a <div> tag
• by styling and positioning content within a <div class> tag
• by styling content inside a <span> tag
• by styling and positioning content inside a <layer> tag (invented by Netscape)
• by styling and positioning content inside a <ilayer> tag (invented by Netscape)

The most popular ways to control layout and position with CSS are ...

• by using a <div id> or <div class> tag with the Float and Clear properties
• by turning <div id > or <div class> tag's into layers by adding position and Z-index property/values.

The <span>, <layer> and <ilayer> tags are used less and less.

<div> tags concepts

Click here to read an article on <div> tag concepts.

<div> layout & positioning with Float & Clear

When you surround content with a <div> tag you can use the Float and Clear properties to position and style that content into boxes and elements such as columns, headers and footers.

Click here to read an article on creating layouts WITHOUT turning <div> tags into layers.

<div> layout & positioning WITH Layers

When you add Positioning and stacking order (Z-index) to a <div> tag it becomes a layer. Click here for more on Layers

Creating div tags & layers in Dreamweaver

Click here to read a tutorial on creating divs and layers with Dreamweaver.

Related downloads

None at present

Related ads