Accessibility

Dreamweaver Article

 

Designing with CSS – Part 6: Deciding Whether to Float or Position Columns


Adrian Senior

Adrian Senior

www.webade.co.uk
www.communitymx.com
www.ukcsstraining.co.uk

Table of Contents

  1. Introduction
  2. Should I Float or Should I Position?
  3. Major Problem with Absolute Positioning
Created:
22 February 2005
Modified:
12 September 2005
User Level:
Beginner

Note: This article has been updated for Dreamweaver 8. The CSS features in Dreamweaver have been vastly improved in Dreamweaver 8. You can learn about those changes in Julie Hallstrom's article, An Overview of CSS in Dreamweaver 8.

Welcome to Part 6 of this article series on CSS design concepts. If you missed the earlier tutorials in this series you can find them below.

Designing with CSS – Part 1: Understanding CSS Design Concepts

Designing with CSS – Part 2: Defining Style Properties and Working with Floats

Designing with CSS – Part 3: Creating Your First Design Without Tables

Designing with CSS – Part 4: Creating a Two-Column Layout

Designing with CSS – Part 5: Defining Columns and Vertical List Navigation

In this series, I am reviewing how you can use Dreamweaver 8 to move towards using the CSS positioning technique of developing web pages.

In this, the final part in this series, I will review alternative methods to create a two-column layout. So far, I have used the float method (my preferred option), but I could also position the navigation div to achieve the same results. I will review the positioning method in this tutorial, and I'll explain why I prefer the float method over the positioning method. In this tutorial, you won't use the CSS and page layout you created in earlier parts of this tutorial series; you will be concentrating solely on the structure of the page. I'm sure you have a good grasp on styling your pages now, as I have covered that topic in depth earlier in the series.

Requirements

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

Dreamweaver 8

Sample files:

Prerequisite knowledge:

Further reading:

I have completed a two-column CSS layout—called North Pole JumpStart—that you can download from CommunityMX, complete with a set of tutorials on how the layout was achieved. I have also written a study of the structural side of the CSS of this JumpStart. I recommend that you read through it:

Page 1 of 3
Next Page

About the author

Adrian Senior owns the UK-based web design agency Webade, which has been in business since 1998. He is also a member of Team Macromedia and a partner at Community MX. The year 2004 saw Adrian's first trip to America, where he visited Orlando and delivered two sessions at the TODCon conference.

Adrian also provides training courses for companies who need to train their designers how to build compliant, accessible web sites using CSS and xhtml.

He's been married to his wife, Janette, for 24 years and has two children, Antony and Eleanor.