Dreamweaver Article

Applying CSS from Screen to Print to Handheld – Part 3: Columns and Footer

Laying Out the Main Content Area

Open the health.html file. You have three divs to add to your style sheet in order to lay out the content area. Use the following descriptive names for these divs:

• leftcol
• rightcol
• content

Using descriptive names makes it easy for others who may be working on your design to determine which selector relates to any given location in your layout.

• View the movie: Creating the Main Content Selectors

Follow these steps to create the #leftcol selector:

1. Open the CSS panel.
2. Click the New CSS Rule button.
3. Select the Advanced option button.
4. Type #leftcol into the Selector text box.
5. Verify that the health.css file is selected in the Define In pop-up menu and click OK.
6. Select the Box category.
7. Type 139 in the Width text box.
8. Select Pixels from the Measurement pop-up menu.
9. From the Float pop-up menu, select Left.
10. Type 100 in the Height text box.
11. Select Pixels from the Measurement pop-up menu.
12. Select the Background category.
13. Select the Background color cube.
14. Select a color from the palette and click OK.

To create the #rightcol selector:

1. Open the CSS panel.
2. Click the New CSS Rule button.
3. Select the Advanced option button.
4. Type #rightcol into the Selector text box.
5. Verify that the health.css file is selected in the Define In pop-up menu and click OK.
6. Select the Box category.
7. Type 139 in the Width text box.
8. Select Pixels from the Measurement pop-up menu.
9. From the Float pop-up menu, select Right.
10. Type 100 in the Height text box.
11. Select Pixels from the Measurement pop-up menu.
12. Select the Background category.
13. Select the Background color cube.
14. Select a color from the palette and click OK.

To create the #content selector:

1. Open the CSS panel.
2. Click the New CSS Rule button.
3. Select the Advanced option button.
4. Type #content in the Selector text box.
5. Verify that the health.css file is selected in the Define In pop-up menu and click OK.
6. Select the Box category.
7. Type 485 in the Width text box.
8. Select Pixels from the Measurement pop-up menu.
9. Type 300 in the Height text box.
10. Select Pixels from the Measurement pop-up menu.
11. Select the Background category.
12. Select the Background color cube.
13. Select a color from the palette and click OK.

That completes the CSS rules for the structure of your main content. I'd like to add a couple comments as to why you have completed certain steps when creating your selectors:

• Height can be problematic to your designs, as I discussed in Part 2 of the "Designing with CSS" series. Because the height here has been added only as a temporary measure, you can see where your divs are positioned within your design. Make sure the layout meets your expectations. The height will be removed from your selectors later.
• Likewise, the colored background you added to each div makes it easy for you to see your layout when you preview it in Firefox. Remember to use Firefox when testing your CSS layout because many times Internet Explorer simply doesn't get it right. I'll discuss other browsers and workarounds in Part 5 of this series.

Page 2 of 5

Previous Page

Next Page