Nest All the Divisions into a Container DIV

By putting all the DIVs into one container DIV, you gain more control over many aspects of your layout as you'll soon see. You will also include a background graphic you will need to save to your folder. It is shown below. Save it with the name container_bg.gif

Background

Click <body> in the tag selector at the bottom of the Document window. This selects everything on the page.

Body Tag

Click the Insert Div Tag icon in the Common category of the Insert toolbar.

Insert DIV Tag

In the Insert Div Tag dialog box, type container as the ID.

Click the New CSS Rule button in the Insert Div Tag dialog box to create the rule while you create the new DIV.

New CSS Rule

When the New Rule dialog box opens, it should be filled out correctly with ID as the Selector Type, #container as the name, and This Document Only as the rule definition scope. Click OK.

When the CSS Rule definition dialog box displays, select the Background category.

Next to the Background-image field, click the Browse button.

Navigate to the images folder for the site.

Select the container_bg.gif image.

Select repeat-y for the Background-repeat option (see Figure 34).

FYI: HTML has only one background option, and that is to tile both horizontally and vertically on the page. CSS has four repeat options—you can tile on the x-axis or y-axis, not repeat at all, or tile in all directions like the HTML model.

Background

Select the Box category.

For the Height type 1200 and leave pixels as the default unit of measurement.

CSS Rule

Click OK to apply the style.

CSS