Basic familiarity with the Dreamweaver workspace, building HTML pages, and site management in Dreamweaver, as well as CSS terminology and practice. If you want to follow along from scratch, you may want to start with the tutorial, Tableless layouts with Dreamweaver CS4.

User level

Intermediate

Required products

Dreamweaver CS4 (Download trial)

Sample files

css_3c_tableless.zip (11 KB)

In Tableless layout with Dreamweaver CS4, I discussed a variety time-saving features in Dreamweaver that help you develop your websites more efficiently. I also showed you how to create a floated two-column layout similar to the CSS layouts contained in the Dreamweaver New dialog box. For reasons of practicality, I'll start this article with that two-column layout, change it to three columns, and look at some simple techniques that can make your site more attractive.

Note: If you haven't read Tableless layout with Dreamweaver CS4 yet, but have a good basic understanding already, you can download the final XHTML and CSS documents from that article (ZIP, 4K).

Starting at the end

Since you're beginning where the companion article to this tutorial ended, have a look at that layout. Figure 1 shows the index.html file contained in the starter_files folder within the sample files linked to at the beginning of this article. It's simple, but efficient: two columns, no images, all CSS.

Figure 1. The two-column layout you created in the companion tutorial article

Let me also review briefly some tips about floating:

A float must be given a width.
A float must be given a directional value of left or right (there is no top or bottom).
If you want a float to appear alongside another element, it must precede that element in the source order of the document.
A float never covers text or inline images.
Avoid using a width on a block element following a float; use a margin on the same side of the float instead.
Since a float is taken "out of the flow" of the document, a float inside another container must be cleared in order for the parent container to enclose it properly.

Note: For more information, read John Gallant and Holly Bergevin's series of float articles at Community MX: Float: The Theory and Float: The Bugs – Part One (login required).

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.html 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 of the sidebar1 div (in the Design view portion). On the tag selector at the bottom of the document window, you will see the path as: <body> <div#container> <div#sidebar1> <ul><li><a>.
Click <div#sidebar1> 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 #sidebar1 div to the space between #sidebar1 and #mainContent.
On the Common pane of the 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 sidebar2.

Figure 2. The Insert Div Tag dialog box

Click the New CSS Style button. In the New CSS Rule dialog box, make sure Selector Type is set to ID; Selector Name is set to #sidebar2; and Rule Definition is 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. Note 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 pane and note that the new div is sitting in the upper right corner of the #mainContent div (see Figure 3).

Figure 3. The new div sitting up in the upper right corner of the #mainContent 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 shows that the text in the #mainContent div will wrap around the #sidebar2 div when it reaches the end of the text #sidebar2 contains. By design, it clears only the text portion of the float.

Since the floated #sidebar2 div has a background color and the #container div is white, it may not be apparent exactly where the #mainContent div is. To make it visible, 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 #mainContent div is actually going from the #sidebar1 div to the right side of the #container div. The #sidebar2 div is merely pushing the #mainContent div's text aside.

Figure 4. The CSS Backgrounds View showing that the #sidebar2 div is merely pushing the #mainContent div's text aside until it ends.

It's obvious you need to handle the new right column just like you handled the left one in the companion article. Give the #mainContent div a right margin so that it remains away from the area taken up by the #sidebar2 div no matter how far down the page it actually extends. Place your cursor into the #mainContent div and on the Tag selector, choose <div#mainContent>. In the Properties pane of the CSS Styles panel, change the margin declaration 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. If you have three values, like margin: 0 165px 5px;, you would read this as top, right, bottom—with the left value (the missing fourth value) mirroring the right value. 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.

After you've changed this declaration, note that the #mainContent 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.

Figure 5. The #mainContent 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 #sidebar2 div, I've turned the CSS Layout Backgrounds back on so you can see what's really happening (see Figure 6). Note that the color of the #container div shows where the right and left columns end. The #mainContent div is contained in the middle by using the side margins.

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

Note: You could have placed either the #sidebar1 or #sidebar2 div first in the XHTML source of the document. Both will work. Many times, people place the navigation first to make it more predictable for screen readers. (You can place an anchor at the top of the navigation to allow screen readers to skip straight to the content if they prefer. Another anchor can be placed after the content to allow them to skip back up to the navigation to go to another page.)

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

Adding content to the column

Copy some of the Lorem Ipsum filler text out of the middle mainContent area (or your own preferred custom jibberish) and paste it into the #sidebar2 div. Be sure that the text is placed in P elements. The effect of this part of the exercise is best if you don't copy so much text over that the right column becomes longer than the middle content area. Since the black text is a bit tough to read on the dark background, create a descendent selector to the demo.css file that tells all P elements in the #sidebar2 div to render in white:

        #sidebar2 p {
    color: #FFF;
}
    

Tip: I find it quickest to develop in a standards-compliant browser like Firefox, Safari, or Opera. When I've completed most everything, I preview it in Internet Explorer (IE). It's much simpler to create a couple special rules or declarations to fix any IE problems using an Internet Explorer Conditional Comment (IECC) than it is to try to do the same in a standards-compliant browser.

Click the Live View button on the top document toolbar to see what you've achieved. You've got three obvious columns. The line delineating the left column appears to go all the way down the page due to a trick I used in the last tutorial. I created the visual effect of a column by placing the border on the left side of the #mainContent div. Since a div only extends as far as the content within it, placing the border on the right side of the #sidebar1 div would not always extend it to the footer (unless the sidebar always has the most content). A technique like this works only in a site where you have extremely predictable content. When you move into larger and dynamic sites, this technique isn't bulletproof.

What about the right column where you've placed a background color instead of a border? The background color makes it quite obvious that the #sidebar2 div doesn't extend to the bottom of the content area (see Figure 7). You can't use the above technique to make it appear that it does. You're stuck with a column that doesn't extend to the footer. Or are you?

Figure 7. The #sidebar2 div doesn't yet extend to the bottom of the content area.

Enter faux columns

Are you old enough to remember when faux painting in homes was all the rage? Perhaps I'm dating myself. But I remember when it was cool to use painting techniques to make it appear as though there was a window where one didn't exist, or a table with a vase, stone walls, or a myriad of other fun effects. You'll do something similar here. Only instead of using paint, you'll use an image. You can do this portion of the tutorial in Fireworks or Photoshop, or you can use the completed faux.gif image contained in the images folder of the finished_site folder in the files you downloaded at the beginning. I'll be using Fireworks.

Since the container controlling the web page's width is 780 pixels wide, create your canvas at the same width. This will be a repeating slice, so you can keep it to about 10px high. Use the graphics program of your choice or the included graphic. In your preferred graphics application, draw a rectangle for the right and a line down the left at 165px. Personally, I love Fireworks because of its vector ability; so if you're using Fireworks, follow these steps:

Select the color of your left column divider (#877D6C) and draw a line 165px from the left side. If you're a little off, you can simply type 165 in the "X" input of the Property inspector to place it exactly.
Now, using the color of your right column (also #877D6C in this case), draw a rectangle 160px wide and position it at the far-right side of your canvas. Select gif in your optimize panel and export the image as faux.gif into the images directory of your site definition.
Tip: The values used for the delineating line and background color could have varied anywhere from 160px (the outer column's actual width) to 165px (the amount of margin on the #mainContent div). I chose to match exactly what I had previously shown in the design, so I used the #mainContent div's margin amount on the left (since the border was placed on the #mainContent div) and the width of the right column on the right (since the background was placed on the right column itself).

Now you'll work the real magic.
Click in your document and on the Tag selector, click <div#container>. I find it easiest when adding background images to click the Edit Rule icon at the bottom of the CSS Styles panel to open the CSS Rule Definition dialog box. Using the Browse button in the Background pane makes it easy to ensure I have the correct path to my image. The white background color is there. You simply need to add the background–image and Background-repeat.
Navigate to the faux.gif image and then set it to repeat on the Y axis:background: #FFFFFF url(images/faux.gif) repeat-y;
Tip: If you're unfamiliar with the repeat-y portion of that value, it's simply telling the graphic to tile on the y axis (or top to bottom).
View your page in Live view for the full effect. Note that the columns now go the full length of the page (see Figure 8). In fact, they run right through the footer (if you removed the color of the header, you would see them there as well). This is because you've placed the graphic on the #container div. Any element in the #container div without a background color of its own declared will show this image.

Figure 8. The columns now go the full length of the page

Smoothing out the footer

In some designs, you may choose to leave the #footer transparent and simply give it margins that match the #mainContent div, keeping the text right in the center. Other times, as I'll demonstrate in a moment, you can give it a background color. It's likely obvious that you can remove the background from the #sidebar2 div and remove the border-left from the #mainContent div since they are no longer needed.

Place your cursor in the #footer div in the Design view portion of the window.
Choose <div#footer> on the tag selector.
On the Property pane of the CSS Styles panel, click Add Property. Type Background (or choose it from the drop-down menu) and click Enter.

Your cursor will move to the value portion—type #FFF and press Enter again.

If you've left your page in Live view, you may need to click the Refresh Design View icon at the top of the document (the blue curved arrow) before the changes will appear in Design view (see Figure 9).

Tip: If you're unsure of how hexadecimal (hex) color shorthand works, use the following key. Color values with three identical characters are simply doubled. #FFFFFF becomes #FFF; #000000 becomes #000. This is because the first two characters of the color formula represent red, the second two represent green, and the final two represent the blue portion. Thus, hex numbers like #00FF00 or #993366 become #0F0 or #936, respectively. Hexadecimal colors with nonidentical RGB characters, like #822B56 or #ADADAD, cannot be shortened.

Figure 9. Adding the background property to the #footer div to correct the footer.

Careful not to blow it up!

One thing I touched on in Tableless layouts with Dreamweaver CS4, but wanted to illustrate visually for you here, is float drop. If an element is placed inside the #mainContent area and it is larger than the #mainContent area can contain, that portion will drop down below the floats. I created an image you'll find in the image directory of the sample files called float_drop.jpg. Insert it near the top of the page in the #mainContent div. Now view that page in Internet Explorer 6. Internet Explorer is the only browser that illustrates this odd behavior but since at this writing, it's still at about 25% of the market share on average, you have to be aware of it.

Do the math. Since the overall #container is 780px wide and the margins on the #mainContent div are each 165px (totaling 330px), you have a total available space of 450px in the #mainContent div.

Since the left column is taking up 165px of the horizontal space, the image drops down until the right column text ends so it can grab the extra 20px it needs. Other browsers respect the column sizes and simply overlap the image onto the right column (which is usually no more visually desirable). Figure 10 shows the page in Internet Explorer 6.

Figure 10. An image causing float drop in Internet Explorer

You may notice that, due to this issue, the #container div in Internet Explorer gets expanded about 20px wider than specified as well. Since you're creating the columns using the faux technique, you can see the unsightly white background peeking out on the right. Removing the background color will, of course, get rid of the ugly appearance in some situations, but the #container div is still being made wider, which can definitely give you trouble in other layouts.

Dreamweaver's own rendering now tends to lean more toward standards-compliant browsers with each version. The Dreamweaver CSS Layout Backgrounds view will give you a great view of what's happens with the #container div in standards-compliant browsers, including Internet Explorer 7 (and Live View shows you what Web Kit browsers see).

Figure 11 shows how standards-compliant browsers simply overlap the large element over the side columns. The #container is not forced any wider. This is equally undesireable since it makes some of your content inaccessible.

If you do not place large elements inside a div that has less space then they require, you can avoid this. There's not any other magic bullet. (This may mean that if you have clients updating their own sites with Contribute or InContext Editing, you'll need to educate them about proper sizing for their layout.) Delete the image and you're back to a normal layout so you can move on.

Figure 11. A wide image overlapping the content of the sidebar2.

More faux image techniques

Let's look at one more technique before I close this tutorial. I'm not going to create a glorious design for you—that's your job. I am going to show you a proof of structural concept and you can take it from there. You and I know that we have a straight header across the top, three columns and a footer. But your client and surfer don't need to realize it's that "boxy." Why not make your right column appear to extend up into the top header area—as if it overlaps? Using a sibling or child element and faking them out is really simple.

You can use the completed dec_top.gif image contained in the images folder inside the finished_site folder linked to at the beginning of this article. I opened Fireworks (feel free to use the image editing software of your choice) and created a canvas 162×43 pixels. This gives me just a touch more room than my third column, so I can work. For illustration purposes, I used the "Chamfer rectangle" autoshape in the same color as the column and set it to be 160px wide. You can use any shape you like to finish off the top of your column—just be sure it's ultimately160px wide to get a perfect match. Export it as dec_top.gif into your image directory as a transparent GIF with the matte set to the header color (for this example, that's #DCCBAC).

Back in Dreamweaver, select the #header div of your document on the Tag selector. Currently, viewing it in the CSS Styles panel, there's a background color only:

background: #DCCBAC;

Let's add the faux column top by clicking the Edit Rule icon. Browse to the dec_top.gif image, set it not to repeat, and place it at the bottom right of that div. Using this technique, no matter how tall the header is (if someone is surfing with the text size set at a larger default size, the header will increase in height), it will appear to connect with the right column and overlap the header. The background value will change to the following:

        background: #DCCBAC url(images/dec_top.gif) no-repeat bottom
right;
    

View the page in Live view and have a look at the top right
area (see Figure 12). See how the column appears to move up seamlessly? Think
of the possibilities!

Figure 12. Adding a faux column top

You can use a similar technique to make the header appear to have a curved bottom—but instead, you actually place the background image on the #mainContent div or one of the sidebars. Or you could put a top and bottom shadow or gradient on an element without a specified height and make it appear to stretch to any height using similar techniques. "But," I hear you say, "you can't put two background images on one element." Right, but every good client-side developer will have a way to make creative designs work. Due to space limitations, those styling tricks as well as some creative navigation ideas will have to wait for another tutorial or you can learn more in the project-based book I wrote with Greg Rewis based on the CSS layouts in Dreamweaver called, Mastering CSS with Dreamweaver CS4 (or CS3 if you haven't upgraded).

If you need to hack IE

There is the possibility that even though in this layout, you don't have any Internet Explorer bugs, you might encounter them through an element or some styling added in your own layout. Dreamweaver CS3 added a new feature to help you find these pesky little creatures. Check Browser Compatibility (on the tool bar at the top) will check for the most common bugs and then send you to CSS Advisor (a site on Adobe) for the solution to the possible problem. CSS Advisor is a moderated community wiki that allows everyone to share information as they find it. CSS Advisor has much more information than only the most common bugs. If you don't find the info you need there, Position is Everything and Community MX have chronicled many of these IE bugs, and with the looming IE 8 release, there's a simple fix for many of them. Many of the bugs you'll run into are based on the fact that IE requires an element to have "hasLayout" (You can read more about this IE-only property in this excellent article by Ingo Chao (please link)). Currently, the fix for this issue is best handled using another proprietary IE property—zoom. This property, placed in an IE conditional comment (or a style sheet brought into the page with an IE Conditional Comment), will fix a multitude of IE sins. Placed in an IE conditional comment, it will also allow your page to pass validation if you desire.

        <!--[if IE]>
<style type="text/css">
#mainContent { zoom: 1; }
</style> 
<![endif]-->
    

Note: With the impending release of IE 8, and the as yet unknown issues we'll face with this new version, you might be wise to use the syntax to show the hasLayout fix to IE7 and below. It looks like this: <!--[if lte IE 7]>.

Commenting for clarity

I'd like to leave you this time with a tip I've found to be extremely helpful to my CSS development: commenting. I make use of it both in my XHTML and in my CSS. In the XHTML, I place a comment before the close of each div. This not only makes it easier during development, but it also gives me a real boost when I go back to work on the site at a later date. My reason for placing the comment before the close of the div instead of after is that, if I remove an entire div, the comment will be removed with it. If I place it after the close of the div, it could be left in the document—and later it could get rather confusing with rogue comments. I use the following:

</div>

Another place I make use of comments is in grouping the general sections of my CSS, as well as any selectors or declarations that have something different about them. That is, anything unique that I might forget later. Never for a minute think you'll remember why a selector or value is in your style sheet after you've coded 14 new sites since that one. Take advantage of comments to remind yourself. (You can see the method I use in the final files included with this tutorial as well as in the CSS layouts that come with Dreamweaver.)

Until next time, happy coding...

Where to go from here

I hope this has been an informative journey through creating a simple three-column layout using Dreamweaver. The selector names and principles of layout used here are the same ones you'll find within the CSS layouts included in Dreamweaver. The CSS layouts can be leveraged to more quickly start your own web development. For further learning, please read Understanding the New Dreamweaver CS3 CSS Layouts where I explain how to access them and give a few more specifics.

For more tutorials on CSS in Dreamweaver, visit the CSS page in the Dreamweaver Developer Center and the CSS tutorials on Community MX. If you'd like to work through projects based on the CSS layouts in Dreamweaver, check out my book with Greg Rewis, Mastering CSS with Dreamweaver CS4 (or CS3 if you've not yet upgraded).

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Tutorials and samples

Tutorials

Samples

Dreamweaver user forum

04/23/2012	Resolution/Compatibility/liquid layout
04/20/2012	using local/testing server with cs5 inserting images look fine in the split screen but do not show
04/18/2012	Ap Div help
04/23/2012	Updating

Dreamweaver Cookbook

11/07/2011	Simple social networking share buttons
09/20/2011	Registration form that will generate email for registrant to validate
08/21/2011	Spry Accordion - Vertical Text - Auto Start on Page Load - Mouse Over Pause
08/17/2011	Using cfdump anywhere you like

Creating a simple three-column design

by Stephanie (Sullivan) Rewis

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Sample files

Starting at the end

Adding the third column

Adding content to the column

Enter faux columns

Smoothing out the footer

Careful not to blow it up!

More faux image techniques

If you need to hack IE

Commenting for clarity

Where to go from here

More Like This

Tutorials and samples

Tutorials

Samples

Dreamweaver user forum

Dreamweaver Cookbook

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company