Using Absolute Positioning to Create Side-By-Side Columns

Now you will use absolute positioning to place your linked items at a exact location.

Make sure your CSS Styles panel is open. If you do not see it on screen, choose Window > CSS Styles.

Absolute Positioning of the Text Link Area:

Start by putting each link in the sidebar in its own paragraph:

With your Simpson site open,, click after the first link labeled Home.

Press the Return key. This will place the next link on its own line.

Repeat these steps to place each link in its own paragraph.

Own Line

Click the new rule icon New CSS Style at the bottom of the CSS Styles panel. The New CSS Rule dialog box is displayed.

Select ID (Applies To Only One HTML Element) as the Selector Type.

For the Selector Name, type #sidebar. This is the same name that you gave the DIV in the HTML page. The properties you set in the new CSS rule will directly affect the sidebar.

Note: ID names always begin with the number sign, and must be unique on the page.

Define the rule in "This document only". Assume that you will always use this option from now on.

ID

Click OK and the CSS Rule Definition dialog box opens.

Select the Positioning category on the left.

Select Absolute as the Type.

Type 150 in the field next to the Width menu, and choose pixels (the default) as the unit of measurement.

Under Placement, type 420 as the Top setting.

Choose pixels (the default) for the unit of measurement.

Type 15 as the Left setting and again make sure pixels is the default unit of measurement (see Figure 17). The values for top and left are in relationship to the body, which is the parent container of the sidebar DIV.

Settings

Click OK.

You will probably be surprised at the result that appears in Design view in the Dreamweaver document window. The content area now covers the header section. An absolutely positioned DIV is taken out of the natural flow of the document and placed at precise coordinates. The other content no longer "sees" it. You will fix this in the next part of the exercise.

Overflow Links

We also want to extend the sidebar so that it is about the length of the Content area. Double click the #sidebar CSS style to open it. Click on box and enter 150 for the Width and 2000 for the Height.

CSS Rule

Absolute Positioning of the Main Content Area:

Click the New CSS rule button.

When the New CSS Rule dialog box opens, type the name #mainContent and choose the ID selector type. (Again, note that the ID begins with the number sign and must have a unique name.)

Click OK and the CSS Rule Definition dialog box will open.

Main Content

Select the Box category on the left.

Under Margin, deselect the Same For All checkbox so that it is empty. You want to apply a unique margin to the Left field.

Type 175 for the Left value, and make sure pixels, the default unit of measurement, is selected (see Figure 19).

Click OK.

Main Content

Your page should look like the one below, the links to the left of the content area.

Main Formatted

Absolute Positioning of the Footer Area:

At the CSS Styles Panel click the plus button to create a new CSS Style.

When the New CSS Rule dialog box opens, type the name #footer and choose the ID selector type. (Again, note that the ID begins with the number sign and must have a unique name.)

Click OK and the CSS Rule Definition dialog box will open.

Footer

Click on the Box section and type in the width of 900 and the height of 50. Deselect the Same for all under Margin and type in 175 for the Left Margin as shown below:

Footer

Click on Positioning and select absolute for the position, placement type 2300 for the top and 0 for left.

Click OK to apply the settings.

Position

 

CSS