HTML/XHTML:CSS Layouts

Overview
In the past tables were used to do much of the layout on a web page, however, using the Div tag in association with Cascading Style Sheets (CSS) is becoming the accepted way to layout a web page. Web page authoring tools such as Microsoft's Expression Web and Adobe's Dreamweaver provide templates you can use to simplify this task.

Center column layout

 * For the body:
 * It is good practice to zero the margin and padding to allow for different browser defaults
 * Text-align: center will center the container in IE5+ browsers
 * For the container:
 * Text-align: Left will override the body center setting

OneCol.htm

Two column layout


TwoCol.htm

Three column layout
ThreeCol.htm

Exercise

 * 1) Create a small three page web site using the DIV/CSS styles shown above

CSS Layouts

 * Microsoft Expression Web
 * File > New > Page (tab) > CSS Layouts
 * Adobe Dreamweaver
 * ''File > New
 * Page Type: HTML Layout: Choose the CSS layout you want

CSS Examples
Centering a block

Fixing height problems with some div's.