Tableless layouts with Dreamweaver CS4

If you've been doing web development for years and you've decided to take finally a look at "all this CSS stuff" you've been hearing about, it will likely require a bit of a paradigm shift. If you're a new developer and you're starting out by learning how to separate the structure of your document from its presentation and behavior, you likely won't find it quite so difficult.

Using CSS to position the elements on your page is a very powerful thing. In this article I'll review a simple page layout, show you how to create it in Dreamweaver CS4, and discuss some of the things you need to consider as you build it.

Note: If you're just starting out with Dreamweaver CS4, you'll likely find the resources linked in the Getting Started area of the Dreamweaver Developer Center helpful in understanding the new tools available to you.

Download the sample files that accompany this article and define a new site in Dreamweaver.

Note: For more information about defining a site, refer to Setting up a Dreamweaver site in Dreamweaver Help or read the Introducing Site Management chapter from Dreamweaver CS4 The Missing Manual.

You can refer to the completed project files as needed, but let's start with a fresh page to begin your work.

1. Create a new page by choosing File > New In the New Document dialog box, click Blank Page, under Page Type click HTML, and under Layout, select <none> (see Figure 1).

You have 32 pre-made CSS layouts to choose from under Layout. You're going to learn how to build one from scratch in this tutorial, but later, you may find those layouts a useful way to get a quick start on your development. You can read more about them in my article, Understanding the new Dreamweaver CS3 CSS Layouts.

2. In the lower right corner you can choose your Document Type (DTD). For this example, I'm using XHTML 1.0 Transitional, but if you're uncomfortable with that, feel free to create an HTML 4.01 Transitional document. (XHTML is not difficult; the main thing to remember is that all tags must be closed. For more details, see Dan Short's coding standards article, The (X)HTML Files.)
3. Save this file and call it index.html.

Next, explore the following alternate way to create a new document:

1. Right-click inside the Files panel and choose New File. Dreamweaver allows you to name it right away by showing the name area highlighted.
2. Name this new file demo.css.

When you open this file, you'll see how smart Dreamweaver is; it creates the default document based on the extension you gave the file.

I recommend working in Split view so that you can see the code that Dreamweaver writes while you have a visual representation of it in Design view. Dreamweaver CS4 allows you to work in a vertical split view (a great new feature if you're working on a larger monitor).

1. Switch to Split view. You can access this option through the new Application toolbar.
2. Attach the style sheet to your index page. If you're unfamiliar with how to do that, click the context menu at the top right corner of the CSS Styles panel, and choose Attach Style Sheet.
3. Browse to your demo.css file and click OK (see Figure 2).

Now place your div elements on the index page.

1. On the Common pane of the Insert bar, click the Insert Div Tag icon (sixth button from the left if you're using classic view or sixth from the top if you're using the new Insert panel; it looks like a page with a small box in the lower right corner).
2. In the Insert Div Tag dialog box (see Figure 3), leave Insert set to the default (Insert: At insertion point), type container in the ID field, and click OK. This will place a single div on the page.

3. Look at Code view and be sure your code looks like this:

4. In Design view, highlight the words "Content for id 'container' Goes Here" and delete them.
5. Just as you did above, and without moving your cursor, insert another div element. This time, give it the ID of header and click OK.
6. View the code you've just written and note that the header div is nested inside the container div. That's exactly what you want.

   Next you'll insert two more div elements after the header (not nested within it).

7. Place your cursor after the closing tag of the header div (either in the Code view pane or by selecting the header div on the tag selector at the bottom of the document and clicking your right arrow key once) and insert a div with the ID of sidebar1.
8. Following that div element, create the mainContent div.

By nature, div elements are block-level elements and unless constrained take up 100% of their parent container. Because of this, they stack up on one another as if there were a break element in between them. Since none of the divs have any styling applied, let's see if they behave as expected.

On the main document toolbar, you'll see a little Visual Aids icon about mid-way across—it looks like an eye. Select it and choose CSS Layout Backgrounds. Your divs will magically appear with background colors (see Figure 4). Since these background colors are randomized, your colors will no doubt be different from the ones shown here.

Div elements are like building blocks—but made of clay. You can mold and carve them into the size and placement you need. You can even make them appear to be non-rectangular shapes using background images (but that technique is for another article). In this case, you're going to set a width on the holder div and center it in the browser. You could just as easily allow it to take up the entire browser width, but limiting the width of the layout is sometimes a wise choice for creating a comfortable, readable line length. Monitors are growing larger all the time!

It's good practice to define the properties for the body element first. Browser defaults can vary and this gives you an even playing field to start.

1. Select the <body> element on the tag selector at the bottom of the document.
2. Open the CSS panel by selecting Window > CSS Styles if it is not already open.
3. In the CSS panel, click the New CSS Rule button (among the icons at the bottom of the panel, it looks like a page with a plus sign). This brings up the New CSS Rule dialog box (see Figure 5).

4. For Selector Type, choose Tag (so it redefines the look of a specific tag or element). If you selected <body> on the tag selector, Dreamweaver CS4 will auto-populate it for you in the Selector name field. If it doesn't, either type body or choose it from the pop-up menu. For Rule Definition, choose demo.css from the pop-up menu.
5. Click OK. The CSS Rule Definition dialog box appears.
6. I always begin by zeroing the margins and padding, and setting my font size, color, and background color. The panes of the CSS dialog box should be fairly self-explanatory, but for this first one I'll point you in the right direction:
   • Category > Type
     • Font-family: Choose the list beginning with "Arial, Helvetica..."
       
     • Font-size: Type 100 and choose % for the unit of measurement
       
     • Color: Enter #000000
   • Category > Background
     • Background-color: Enter #ADA189
   • Category > Block
     • Text-align: Center (to force Microsoft Internet Explorer 5 to comply with the centering)
   • Category > Box
     • Margin: 0 (leave same for all checked)
     • Padding: 0 (leave same for all checked)
7. Click OK.

Note that at the top of your index.html document, you can see all the related files. In this case, you have Source code and demo.css. Clicking demo.css allows you to view your demo.css document while still viewing the visual design. Within the demo.css, you should see a rule similar to the following:

Note that when you view your index.html page that your divs now all appear centered. If you've left your CSS Background colors visualization on, you won't see the background color defined for the page. This feature turns off all background colors because it adds its own. If you want to see the effect that your rules are having, feel free to leave this feature on for now but know that you won't see the background color you just defined.

Code hinting

For the #container div, you'll use another method of creating the rule. This method demonstrates how code hinting works.

Beneath the body selector in the demo.css file, type #container {. Beneath that line, type width: 760px;. Note that Dreamweaver gives you hints based on what you type. When you see the property you need, press Enter; it will put the property and colon separator on your page and will then move on to the value hints.

Beneath that line type background: #FFFFFF; and close the rule by typing }. Once a rule is begun in the CSS page, you can use the Properties pane of the CSS panel to edit and add to it.

The Properties pane

You'll now complete the rule with the Properties pane of the CSS panel.

1. Click in any of the divs in Design view. Note that you can see the document tree on the tag selector at the bottom of the document. Depending on the div in which you placed your cursor, it will look something like this: <body> <div#container> <div#sidebar1>. When working in Dreamweaver, the tag selector is your very best friend.
2. Click <div#container> on the Tag selector. With your CSS Styles panel in Current view, note that, in the Properties pane, you can see the two property/value pairs you just created. You may need to drag the Properties pane area down a bit to see all your properties.

   Next, you'll add a couple more properties. I keep my Properties pane set to Show only set properties, so I don't have to scroll through all the unused properties (the three icons at the bottom left of the Properties pane).

3. Click Add Property. On the left side there will be an input. You can enter your property if you're sure you know the exact label. Or use the pop-up menu to select it (they're in alphabetical order).
4. Select the text-align: option. Once it's selected, an input appears on the right side. Again, enter the value or select from the possible choices shown in the pop-up menu. Select left.
5. Finally, click Add Property again and select margin.

Note that you don't get a pop-up menu showing any values. I prefer shorthand-style CSS because it's so much more succinct. If you can't remember the order to place the shorthand values, don't worry. Dreamweaver reminds you if you hover your cursor over the value input (see Figure 6). Enter 0 auto 0 auto (if you really want to be short about it, 0 auto gives the same, but shorter, results).

In the demo.css file, your rule should now look something like this:

Let's review the #container rule and discuss the values given. Since you're centering this page, the div must have a width. Otherwise, as I mentioned earlier, it will be 100% as wide as the body element (which is its parent). The margins given, with both side values set to auto is the magical property that forces that #container to be centered. No matter how wide the browser is, this 780-pixel block will be in the center. Since you gave the overall page a background color, you gave this div a white background for legibility.

Finally, you placed text-align: center into the body rule to center this div in Internet Explorer 5 series browsers. Thus, you put text-align: left into the holder to bring everything back to the default left alignment.

Defining the header

There are three more divs, all within the #container div, to define. Feel free to use any of the previous three methods to create these rules. Play around with them and see which works best for you:

Allow the header to stay at 100% of the width of its parent container (the container div). That means it is also 780 pixels wide. There's no need to define it. Also allow the contents of the header to define its height. In general, this area is used for the company name, logo, and tag line. Many times it will be an image, but I'll use text for this demonstration.

Type in a fake company name in a <h1> element and remove the placeholder text. Now that you've carved and formed the blocks that create your page, view them with the CSS backgrounds again. Turn on the CSS Layout Outlines as well (see Figure 7).

Note that the #sidebar1 div is now sitting to the left of the #mainContent div. This works because the #sidebar1 div is given a width (140 pixels + 20 pixels padding = 160 pixels) and is floated left, and the #mainContent div is given a left margin of 165px which clears that width. There's now room for them both on one line.

Note also that the left margin for the #mainContent div is 5 pixels wider than the width of the #sidebar1. I always give the margin values at least 3–5 pixels more than they seem to need because Internet Explorer for Windows sometimes adds a phantom 3 pixels to the value.

If an item is placed in the #mainContent div that is wider than the space provided, the content div will drop to the next line (below the #sidebar1 div). This is called float drop and if you'd like to see it in action, simply place an image (or div with a width setting wider than the #mainContent div allows, over 615px) into the #mainContent div and preview it in Internet Explorer. (John Gallant and Holly Bergevin wrote a great series on Community MX about floats and how they work, called Float: The Theory.)

Note: You could absolutely position the #sidebar1 div and give the #mainContent div the same left margin to get the same effect. In general, I don't do this because an absolutely positioned div is taken out of the flow of the page so that none of the other elements know of its existence. So if you had a great deal of content in your #sidbar1 column, it would simply run off the bottom of the page and not respect the same boundaries that the other divs do. This can be messy, so I don't advise it. For more information on the flow of the document, read John Gallant and Holly Bergevin's article on Community MX, called Flowing and Positioning: Two Page Models.

Now that you've got the basic structure in place, let me give you a few tips and pointers on what to watch out for.

Dealing with floats

The following are some of the basics that you must know when you float:

• Your float needs a width and a direction (right or left). If you're floating an element next to a non-floated element—both right or left (as is the case of our left-floated column with a margined mainContent), the float must precede the non-floated element.
• Internet Explorer currently has a doubled-float margin bug. This affects the side of the div that you're floating toward. For a right float, it's the right margin; for a left float, it's the left margin. For this reason, I always zero that margin. If I need to create space, I use padding (remember that padding is inside the div and margin is outside the div). You can use the padding either inside that floated div or on the div's parent container, depending on the effect you want. If you must use a margin on the same side you're floating toward, you can add the declaration display: inline;. Dreamweaver will tell you this (and more) by using the Check Browser Compatibility menu command on the Document toolbar.
• Floats need to be cleared. Note that the content from the #sidebar1 div is protruding outside the bottom of the #container div. Without clearing that float, the #container can't detect where its content ends. Clearing the float allows the parent to contain it. There are a variety of ways to clear your floats, but the one I use most often is this:

In your XHTML page, add <div class="clearfloat"></div> (or the same class placed on a <br /> element) as the last element in the div you're clearing. In your page, that would be right before the close of the #container div. This causes the #container div to contain the float even if thefloat is taller. (You can read more about clearing floats, using a differentmethod, in John and Holly's article on CommunityMX, called Clearing Floats, theEasy Way.) Notie that once the float is cleared, the #sidebar1 content nolonger hangs outside the #container.

Adding a footer

Most pages have a footer area containing text links, copyright notices, and so on. In your CSS page, add the following:

Now go to your XHTML page and place your cursor right before the closing tag of the #container div. This is right after the div with the .clearfloat class applied. It's simpler to target the exact spot in the code portion of your window. As you did before, insert a div element from the insert bar. This time, though, note that because you already defined a rule for #footer in your CSS, this ID is available to you from the pop-up menu in the Insert Div Tag dialog box.

Also note that none of your other div IDs are available. This is because they're already in use and Dreamweaver is smart enough to know that they can be used on a page only one time (whereas a class can be used unlimited times). View this page with CSS backgrounds again (see Figure 8).

Because this article's purpose is to show you how to create a simple page using the tools in Dreamweaver, I'm not creating a beautiful layout here. But to demonstrate a couple more tips and techniques, let's add a touch of styling.

In your CSS document, add the following h1 selector for your header. This selector changes the font style, size, and color as well as the spacing around it:

Tip: I want to point out one thing in the h1 selector. If you were viewing with CSS background colors earlier, you may have noticed that the h1 element in the #header had a color shown on it, but that there was space of another color above and below it. If you were viewing without the background colors, you saw a white area above and below the background color given to the header. This is caused by the outer margin on the first or last element inside the div (in this case, that's the h1). Since it's coming from the element inside, you can zero the margin and padding of the div and it won't do any good. But remove the margin of the element inside the div and you're fixed (see Figure 9). Note that I zeroed the margin of the h1 and then added padding to create the space I wanted around it. Padding does not escape.

Descendant selectors

Let's put some Latin (lorem ipsum) or jibberish of some sort into the #mainContent div of the XHTML page so that you can view the styling more clearly. (I do this with a homemade snippet, but you can get the Lorem Ipsum extension or copy and paste from the Lorem Ipsum website as well.) Make sure you put this content into p elements. Go ahead and do this now; you'll use the power of CSS to define what these p elements should look like. This is one of the best ways to avoid classitis—the classing of every element on your page to style it.

1. First, universally make the size of all p elements 80% by creating a element (tag) selector to define them all:

2. Now vary some of the values from div to div. Place your cursor inside one of the p elements in the #mainContent div. Click the icon to add a new CSS rule.
   Note that it appears with the input already filled with the path to that element: #container #mainContent p.
3. Because you don't need to be that specific, click the new Less Specific button and the #container portion will be removed leaving you with #mainContent p.
4. Click OK. As Dreamweaver tells you in the box below the selector name, this rule selects any p element inside the #mainContent div. It does not affect the p elements in the #sidebar1, #footer, or #header divs.
5. In the dialog box that appears set the line-height to 130%.

The #sidebar1 links

Add several links in the left sidebar1 within an unordered list. Unordered lists are a good semantic element to use for navigation. You'll always want to zero the margin and side padding of a list since browsers have differing defaults. 15px of top padding was used to move the navigation down to match the right column's text. Remember, we didn't use the margin because it could, in some cases, escape from the sidebar1 div. You'll also want to remove the list marker. Finally, decrease the font-size to 80% and add a line-height of 150% to space the <li> out a bit more.

Create your own styling for the links in your #sidebar1 using descendant selectors. In this tutorial, you're not going to make them look like buttons, you simply want to style the links. You'll make them bold, remove the underlines and change the color for the various states. To target them, you should write them like this:

Note that the final rule is separated by commas. This is a grouped selector and means all the selectors shown have the same values. (Be sure you don't put a comma after the last selector in the group or browsers will ignore the entire thing.) I create my links grouped like this for accessibility reasons. This gives the person who uses a keyboard to navigate the site the ability to see the same style changes when a link has focus that a mouse user does. Remember, they must be in the order shown.

Let's add the last little bit now. I gave my #mainContent div the following rule: left border--border-left: 1px solid #877D6C;. This creates a border between the two columns. Be aware though, this will only work if you know that the mainContent will always be longer than the sidebar1. If the sidebar1 is longer, the border will only go the length of the mainContent div. If you can't reliably know which column will be longer, use a faux column technique like the one I explain in the CSS layouts article or the companion article, Creating a simple three-column design with CSS.

Finally the footer

Let's add the copyright information to the footer. I added, <p>©2009 My Fake Company. All rights reserved.</p>. I gave the #footer div a top border, and made the text smaller with a lighter color to make it less obtrusive. Remember, you've created a tag/element selector for all p elements that changes their sizes to 80%. Any additional font size changes will be compounded. Since a footer usually has smaller, less obtrusive text, the 80% of the 80% you already have will work just fine (see Figure 10).

Suppose that Joe Client views the page and now decides he'd really like the navigation on the right side like he saw on his competitor's site. With the old style of coding, that would be a major pain. When you position with CSS, it's a non-issue. A quick change gives Joe the ability to view the new look right away.

Change the #sidebar1 from float:left to float: right. Move the margin from the left side of the #mainContent div to the right side. Change the border on the #mainContent to the right and it's done!

Either make these changes in your own style sheet or attach the demo file demo_right.css to see the difference.

Where to go from here

I hope this has been an informative journey through creating a simple two-column layout using Dreamweaver. The selector names used are the same ones you'll find within the CSS layouts included in Dreamweaver. CSS is a powerful tool. Learn the principles and basic browser differences and you'll have your paradigm shift accomplished in no time. I'm sure you'll learn to love it as much as I do. And be sure to check out my follow-up article, Creating a simple three-column design.

For more information about CSS, visit the CSS topic center. 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).