Designing with CSS – Part 6: Deciding Whether to Float or Position Columns
Note: This article has been updated for Dreamweaver 8. If you are still using Dreamweaver MX 2004, please read the version of this article series for Dreamweaver MX 2004. 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.
You may find it advantageous to read an earlier tutorial I wrote for the Developer Center on relative, absolute, and static positioning, called Introduction to CSS Positioning in Dreamweaver MX 2004. It should give you a decent grounding in what you can achieve with each positioning value.
Requirements
To complete this tutorial you will need to install the following software and files:
Dreamweaver 8
Sample files:
- css6_samples.zip (ZIP, 2K)
Comments