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.

Ignoring the header (blue), menu (darker blue) and footer (black) areas, it was built using a generic container (named "content") that held both the "col1" and "main" containers. The "content" container was styled with borders to left and right and a grey background. Within this a transparent "col1" container of 150px width was floated to the left, (Being transparent means it takes its colour from the "content" container underneath,) The "main" container has a left border, a left margin of 150px and a white background, that covers the grey of the "content" container. Without the margin, any content in the "main" container would wrap under the shorter "col1" container.

The mater page layout

Accordingly, 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: If you don't want a full third column skip to Step 4 of this Stage. Doing this allows 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 on the "<div class="main">" tag on the status line.

2. On the keyboard, tap the Cursor-Left key

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

4. 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.)

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

The third column added to the master page

6. 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: 17 March 2008