Go to TopAdding a Third Column

Adding a third column to the right of the Master Page created in this site's tutorial is straight forward, providing.you understand how the page was constructed and that you are prepared to accept some of the inevitable limitations given its basic structure.

You'll remember that, ignoring the header, menu and footer areas, it was built using a generic "content" container that held both the "col1" and "main" containers. The trick in the design was using a transparent "col1" so that it appeared to reach the bottom, when, in fact, it relies on the colour of the underlying "content" block and the margin applied to the "main" block to give this impression.

The mater page layout

Because of its floated structure, the design cannot be extended to include a third column to the right that also appears to reach the bottom of the page. However, for many sites this will not matterand this is what is created here. The basic stages in creating the third column are:

1. Creating styling rules for a "col3" container that, except for floating to the opposite side, duplicates that of "col1".
2. Adding a right margin and right border to the "main" container styling.
3. Inserting the "col3" container immediately before the "main" container.

NOTE: The "main" container must follow the "col1" and "col3" containers. Only then will its contents be able to wrap around the contents of the two earlier floating containers

Go to TopStage One in Detail

1. Open the master page file created earlier.

2. Click on the CSS toolbar button to open the CSS Stylesheets dialogue.

3. Click the New Rule (Artists Palette button) and on the right pane, select the "style applied to an element with specified ID attribute" option

4. Complete the text field so it reads "#col3" (without the quotes) and click the "Create style rule" button.

5. On the left pane, click the "col1" rule, then select the code under the "General" tab on the right pane.

6. Copy this text, click the "col3" rule and paste the copied text to the "General" tab.

7. Edit the line "float: left;" to read "float: right;". (For safety's sake, select the "Box" tab and then choose the appropriate option from Float drop-down list.)

NOTE: For cosmetic reasons you may also wish to click on the "#col3" rule name and then on the Up-Arrow button repeatedly to bring the rule under the "#col1" rule.

The column3 rules entered on the CSS dialogue

Go to TopStage Two in Detail

NOTE: Skip to Step 4 of this Stage if you happy for content in the main container to wrap under the bottom of the content of the third column.

1. Click on the "#main" rule name, then on the "Borders" tab.

2. Against the Right border heading, duplicate the entries for the left border.

3. Click on the "Box" tab and select 150px as the value of the right margin, duplicating the left margin value.

Revised Content container rules

4. Click the OK button to confirm all stylesheets edits made so far.

Go to TopStage Three in Detail

1. Click somewhere in the "main" container then hit CTRL-UPARROW.

2. On the Formatting Toolbar, drop down the Paragraph formatting list and change the entry from "Body Text" to "Generic container (div)"..

3. On the status line, right-click over the "<div>" tag and from the menu that appears, select  "ID" and then "col3". (The cursor will now be in the new container.)

4. For consistency, add the text "col3" as a place marker in your master page.

The third column added to the master page

5. The revised master page is now complete and can now be saved.

See a completed example of the Master Page with the Third Column.

Go to Top Page updated: 3 July 2010