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