Accessibility
Stephanie Sullivan

Stephanie Sullivan

W3Conversions

Table of Contents

  1. Introduction
  2. Starting at the end
  3. Adding the third column
  4. Adding content to the column
  5. Entering faux columns and smoothing out the footer
  6. Reminders about floating and clearing
  7. More faux image techniques and commenting for clarity
Created:
19 June 2006
User Level:
Intermediate
Products:
Dreamweaver

Creating a simple three-column design with CSS and Dreamweaver 8

In the Developer Center, I previously wrote about creating a tableless layout using Dreamweaver 8 and CSS. In it, I talked about a variety of preference setups and time-saving features within Dreamweaver that help you develop your websites more efficiently. I also discussed creating a floated two-column layout. For reasons of practicality, I'll start this article with that two-column layout, change it to three columns, and look at some techniques that can make your site more attractive. If you haven't yet read the other tutorial but have a good basic understanding already, you can download the final XHTML and CSS documents from that article here (ZIP, 4K). Let's get started!

Note: The following article supports Internet Explorer 6 (standards mode), Netscape Navigator 7 and above, Opera 7 and above, Safari, and Mozilla-based browsers including Firefox. Some of the previous versions of these browsers may also render well, but I did not test on them. If you need to support the Internet Explorer 5.x series of browsers, please read The Box Model Problem by John Gallant and Holly Bergevin on Community MX for methods of fixing non-compliant browsers.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver 8

Sample files:

Page 1 of 7
Next Page

About the author

In demand by top U.S. firms, Stephanie Sullivan is a world-class web standards, Dreamweaver, and accessibility expert whose razor-sharp CSS and (X)HTML skills make her company, W3Conversions, a peerless authority for training corporate web teams and transforming in-house designs into efficient, standards-based websites. Sullivan created the CSS layouts for Dreamweaver CS3 and is coauthor of the respected project-based book Mastering CSS with Dreamweaver CS3 and Mastering CSS with Dreamweaver CS4. She's co-leader of the influential Web Standards Project Adobe Task Force, a partner at Community MX, and a speaker who engages audiences around the world with her dynamic presentations. When she's not coding or talking to the little people inside her computer, she escapes to play squash or beach volleyball. Yes, she loves 80s Wave music.