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

css - layout concepts

<div> tag concepts

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 an element to move down below floated 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.