CSS - <div> tag concepts by Matt Ottewill

Laying out pages and positioning elements can be achieved by using CSS and the <div> (divisional) tag. This page covers practical methods for creating page layout with <div> tags and nested <div> tags (<div> tags within <div> tags). You will need to understand the following concepts ...

<div> tags
Nested <div> tags
Float property/value
Clear property/value

<div id> tag

A <div id> tag can be placed within the flow of an (X)HTML document and content such as text, images and other linked media positioned within it. For example ...

<div id="firstcolumn">
<p>This is some text in the first column</p>
</div>

A new style (advanced selector) is then created in a Cascading Style Sheet which can determine property/values such as ...

height
width
border
margin
background colour
etc

Here is an example style ...

#firstcolumn {
width: 100px;
height: 400px;
background-color: #CCCCCC;
float: left;
width: 200px;
margin-right: auto;
margin-left: auto;
}

<div class> tags

You can make a class selector work like a <div id> tag. Here's an example with an attached style ...

<div class="boxclass">
<p>Here is some content in a box</p>
</div>

.boxclass {
width: 500px;
height: 500px;
}

This works well when you want to create multiple boxout elements on a page within the html flow. Obviously you will not be able to give them individual positioning property/values so they will not function well as layers.

Nesting <div> tags

By putting one div tag inside another (nesting) you can control the layout and positioning of multiple elements such as columns and boxes. For example ...

<div id="containerbox">
<div id="header">Content goes here</div>
<div id="column1">Content goes here</div>
<div id="column2">Content goes here</div>
<div id="footer">Content goes here</div>
</div>

In this example, "containerbox" could be defined as a box the size of the site (760 x 490px for example) and "column1" could be a box that hugs the left hand edge of it.

Have a look at the Column and Boxout examples on our CSS examples page .

<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.

<div> layout & positioning with Float & Clear

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