Adding the Divs to Your Page

Your next step is to add the divs to your page. With the hard work already done, this will take you very little time to complete.

• View the movie: Adding the Content Area Divs

Follow these steps to complete the task:

1. Switch Dreamweaver to Code view.
2. Locate the end of your opening innerwrapper div.
3. Place your cursor after the final > and press Enter.
4. Type <div id="leftcol"> on one line and then press Enter.
5. Click the Apply Comment button from the Code toolbar.
6. Select Apply HTML Comment from the pop-up menu.
7. Type Close leftcol.
8. Place your cursor at the end of the comment and press Enter.
9. Type </div>.

Complete the following steps to add the rightcol div:

1. Locate the end of your closing leftcol div.
2. Place your cursor immediately after the final > and press Enter.
3. Type <div id="rightcol"> and press Enter.
4. Click the Apply Comment button from the Code toolbar.
5. Select Apply HTML Comment from the pop-up menu.
6. Type Close rightcol.
7. Place your cursor at the end of the comment and press Enter.
8. Type </div>.

Complete the following steps to add the content div:

1. Locate the end of your closing rightcol div.
2. Place your cursor after the final > and press Enter.
3. Type <div id="content">.
4. Press Enter.
5. Select the Apply Comment button from the Code toolbar.
6. Select Apply HTML Comment from the pop-up menu.
7. Type Close content.
8. Place your cursor at the end of the comment and press Enter.
9. Type </div>.
10. Save your work.

Now that you have the divs set in your code and your selectors added to your style sheet, you can switch Dreamweaver back to Design view to look at the results of your work. Your screen should look similar to Figure 1.

Figure 1. Things are starting to take shape!

You can see that your three columns are looking good, thanks to the height values you added earlier. By switching the view from the default Design view to the CSS Layout Backgrounds view, you can see your layout with greater clarity. You can access the CSS Layout Backgrounds feature from the Visual Aids button on the Document toolbar (see Figure 2).

Figure 2. Accessing the CSS Layout Backgrounds feature

Figure 3 shows the change in view with this option selected. Note how the margins of the two side columns are clearly visible now.

Figure 3. Making the most of the CSS Layout Backgrounds feature

Finally, you want to view your work in in Firefox (see Figure 4).

Figure 4. Your page displayed in Firefox 1.0.7

Page 3 of 5

Previous Page

Next Page