CSS - layout & positioning with Float & Clear
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
Layout & <div> tag concepts
You will need to have read and understood the following articles before reading on ...
Creating div tags in Dreamweaver
Click here to read a tutorial on creating <div id> tags with Dreamweaver.
Float property
The Float property allows you to "float" a <div> towards the left or right of an element it is nested in (such as another <div>)
Have a look at the Column and Boxout examples on our CSS examples page .
Clear property
The Clear property allows you to force a floated element to move down below other elements. Have a look at the 3 Fixed Columns example her. The Footnote <div> is positioned with the Float and Clear properties.
Centering content in a browser window
It is sometimes desirable to create an overall content "container" <div id> and have it center in any size browser window. This is achieved by creating the <div id> and an associated style which gives the <div id> a fixed width and sets its left and right margins to "auto".
The following examples demonstrate centering CSS controlled elements in a browser window.
Click here for a simple example HTML & CSS.
Click here for a complex example HTML & CSS .
Re-sizing content to fit a browser window
By setting widths in % (rather than pixels) and by using the Float property, it is possible to have elements re-size to fit the available browser window space.
Click here for example HTML & CSS.
Columns
Because it is difficult for the human eye to move from the end of one long line of words back to the beginning of the next line (imagine this page had one single wide column of text), it is common for wide pages (such as web sites, magazines and newspapers) to be divided into 2 or more columns. Columns are useful for text and creating structure for other elements such as images.
Have a look at the Column and Boxout examples on our CSS examples page .
Boxouts
By using nested <div> tags and the float property you can create boxes which sit within a column of text and contain related information and content.
Simple boxouts
Click here to view the HTML & CSS
Multiple boxouts
Click here to view the HTML & CSS
CSS - example files
Click here for links to all of this site's example html files and CSS stylesheets.
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
Featured artist
