Accessibility

Dreamweaver Article

 

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


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

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

Stephanie works in the real world as a client-side developer. Stephanie is a writer, speaker, trainer, consultant, troubleshooter, blogger, evangelist, and list mom. She's a partner at Community MX, a member of the Dreamweaver Task Force for the Web Standards Project (WaSP) and an Adobe Community Expert. Although she loves making websites fast-loading and lean, she loves beach volleyball even more. She tears herself away from the little people inside her computer at least three times a week to get sandy.