Accessibility

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

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

Adding the third column

The first step is adding the third column. It will be floated just as the first one was—but this time to the right. Open the index.htm file contained in the starter_files folder within the sample files linked to at the beginning of this article. With your window in Split view, place your cursor into the navigation div in the Design view portion. In the tag selector at the bottom of the window, you will see the path to this div: <body> <div#holder> <div#nav> <p>. Click <div#nav> and click the right arrow on your keyboard. If you keep your eye on Code view, you'll see that the focus has just moved from inside the #nav div to the space between #nav and #content. In the Layout option of your insert bar, click the Insert Div Tag icon. In the Insert Div Tag dialog box that appears (see Figure 2), move down to the ID field and type news.

The Insert Div Tag dialog box

Figure 2. The Insert Div Tag dialog box

Click the New CSS Style button. In the New CSS Rule dialog box, make sure you've got Selector Type set to Advanced; Selector set to #news; and Define In set to demo.css. Click OK. You'll now set the basic properties and values for the right-side column. Here are the settings I chose:

Background:

Background color: #877D6C

Box:

Width: 144px
Float: right
Padding: top:15px right:8px bottom:8px left:8px
Margin: (Same for all) 0px

Click OK. You'll notice that the Insert Div Tag dialog box is still open. Click OK on that one as well. Now you've completed the rule that will control your brand new right column. (Be aware that this could have been done just as well in Code view using the instructions in my previous tutorial. I'm simply reminding you of the various options you can use in Dreamweaver.)

Look at the Design view portion and notice how the new div is sitting up in the upper right corner of the #content div (see Figure 3).

The new div sitting up in the upper right corner of the #content div

Figure 3. The new div sitting up in the upper right corner of the #content div

Of course, when you put more content in the div, it will appear to expand down the page more than it currently does. Figure 3 above shows that the text in the #content div will still wrap around the #news div when it reaches the end of the text it contains. By nature, it clears only the text portion of the float. Since the floated #news div has a background color and the #content div is white, this may not be apparent to you. For the sake of illustration, turn on CSS Backgrounds by selecting View > Visual Aids > View CSS Backgrounds (this will put a different random color into each div). In Figure 4 you can see that the #content div is actually going from the #nav div to the right side of the #holder div. The #news div is merely pushing the #content div's text aside.

The CSS Backgrounds View showing that the #news div is merely pushing the #content div's text aside

Figure 4. The CSS Backgrounds View showing that the #news div is merely pushing the #content div's text aside

You obviously need to handle the new right column like you handled the left one in my previous article. You'll give the #content div a right margin so that it remains away from the area of the #news div no matter how far down the page it actually extends.

Open your demo.css document, find the #content rule, and change the margin declaration within it from what you currently have:

margin: 0 0 0 165px;

to this:

margin: 0 165px 0 165px;

Tip: To simplify this even more, the declaration margin: 0 165px; will give you the same result. If you're unfamiliar with CSS shorthand, it's read like a clock. A declaration like margin: 0 0 0 165px; is read top, right, bottom, left. However, you can get even more succinct. With three values, like margin: 0 165px 5px;, it would be read as top, right, bottom—with the left value mirroring the right. Finally, if only two values are used, as in margin: 0 165px;, the first value is the top and bottom value; the second value is the left and right. This can be used only when they are an exact match.

Once you've changed this declaration, you'll notice that the #content now stays nicely separated from your new column (see Figure 5). You can see it best if you work with the View > Visual Aids > CSS Layout Outlines turned on.

The #content div's text nicely separated from the new column

Figure 5. The #content div's text nicely separated from the new column

And to show that it's actually contained in its own area now, and not secretly sneaking behind the #news div, I've turned the CSS Layout Backgrounds back on so you can see what's really happening (see Figure 6).

The design with the CSS Layout Backgrounds visual aid turned on

Figure 6. The design with the CSS Layout Backgrounds visual aid turned on

Note: You could have placed either the #nav or #news div first in the XHTML source of the document. Both will work. I typically place my navigation first to make it more predictable for screen readers. (I typically place a "skip nav" link there for accessibility reasons as well.)

Obviously it doesn't yet look very column-like since the actual #news div is still squished up into the right corner. But you've definitely carved out some nice space for it now. Maybe we just need to add some content to the column.

Page 3 of 7
Previous Page
Next Page