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
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;
}
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.
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 .
When you add Positioning and stacking order (Z-index) to a <div> tag it becomes a layer. Click here for more on Layers.
Click here to read a tutorial on creating divs and layers with Dreamweaver.
Click here to read an article on creating layouts without turning <div> tags into layers.