Creating a Two Column Layout

Semantically marked up code

To lay out a page into two columns, you need to start with a basic page structure. Luckily, the Berlin pages we have been building together have this basic structure we need. We need to add a little more structure with div tags. A div tag divides the page into unique areas and each div has a unique ID selector.

The basic building block of the CSS layout is the div tag - an HTML tag that in most cases acts as a container for text, images, and other page elements. In our example our HTML page will contain five seperate div tags: one large "container" tag and four other tags- a sidebar1 tag (located on either the left or right side), a header (located at the top of the page), content (for the main content), and a footer (located across the bottom of the page).

Add Container Div

The first div tag that we need to add is the container div which wraps around the entire page's content. Follow these steps to add a container div in Dreamwaver.

1. Highlight all the content in the body tag - in our example from the h1 Visit Berlin to the closing paragraph tag right before the closing body tag.

2. Switch to the Layout Tab on the Insert Toolbar.

3. Select the Insert Div Tag icon.

4. In the Insert Div Tag dialog box make sure the following settings are set.

- In the Insert drop down menu select Wrap around selection
- In the ID text box type container
- Leave the Class text box blank.

5. Click on OK.

Follow similar steps to add the header, sidebar1, content and footer divs.

Add Header Div

1. Highlight the heading 1 now located right after the opening container div tag - in our example the h1 contains Visit Berlin, make sure to select the whole tag including the closing tag.
2. Select the Insert Div Tag icon.
3. In the Insert Div Tag dialog box make sure the following settings are set.

- In the Insert drop down menu select Wrap around selection
- In the ID text box type header
- Leave the Class text box blank.

4. Click on OK.

Add Sidebar Div

Since we don't have content for our sidebar we will just insert an empty div called sidebar1.

1. Place the insertion point on a new line right after the closing header div tag.
2. Select the Insert Div Tag icon.

3. In the Insert Div Tag dialog box make sure the following settings are set.

- In the Insert drop down menu select At insertion point
- In the ID text box type sidebar1
- Leave the Class text box blank.

4. Click on OK.

Add Content Div

1. Highlight all the content from right below the sidebar1 div to the closing paragraph tag right above the closing container div tag.
2. Select the Insert Div Tag icon.
3. In the Insert Div Tag dialog box make sure the following settings are set.

- In the Insert drop down menu select Wrap around selection
- In the ID text box type content
- Leave the Class text box blank.

4. Click on OK.

Add Footer Div

1. Place the insertion point on a new line.
2. Select the Insert Div Tag icon.
3. In the Insert Div Tag dialog box make sure the following settings are set.
- In the Insert drop down menu select At insertion point
- In the ID text box type footer
- Leave the Class text box blank.
4. Click on OK.

Full HTML Code with Divs

Our final code should now have the following div tags:
- container,
- header,
- sidebar1,
- content
- footer.

Adding style to the container div - #container

To add width, margin and other styles to the container div , first we need to declare a new CSS Rule.

1. Click on the New CSS Rule icon in the CSS Panel.
2. In the New CSS Rule dialog box make sure the following settings are set.

- For Selector Type select Advanced
- In the Selector text box type #container
- In the Define in: drop down menu select mystyle.css or an appropriate CSS file name.

3. Click on OK.

This will create this new CSS Rule in the external style sheet.

To get the content to sit in from the edge of the browser window (or viewport) we need to set width and margins on the main div that wraps around the content, which we named container.

In this case we will use a width of 90% so the CSS declaration used is: "width: 90%". Any width could be used, including 100%, which would force the content to the left and right edges of the viewport.

To center the div in the viewport, we apply "auto" margins to left and right. To move the div away from the top and bottom of the viewport we use a margin of 10px. These can be combined into one shorthand CSS declaration: "margin: 10px auto". This will apply a margin of 10px to the top and bottom and auto margins to the left and right.

Box Category

In CSS Rule Definition for #container in mystyle.css dialog box appears, choose the Box category in the box to the left.

In the Box category select the following or similar options:

- For Width type 90 for the value then choose % from the drop down menu.
- For Margin Uncheck Same for all
- Type the following values:
Top: 10 px (select pixels from the drop down menu)
Right: auto
Bottom: 10px
Left: auto

The CSS Code for our #container style so far looks like (added or changed items in bold):

#container
{
width: 90%;
margin: 10px, auto, 10px, auto;
}

Background Category

In the Background category select the following or similar options:

- For Background Color type #FFFFFF or select a color by clicking on the color picker.

The CSS Code for our container style so far looks like (added or changed items in bold):

#container
{
width: 90%;
margin: 10px auto;
background-color: #FFFFFF;
}

Border Category

In the Border category select the following or similar options:

- For Style check Same for all then type Solid
- For Width check Same for all then type 1 px (select pixels from the drop down menu)
- For Color check Same for all then type #333333 or select a color by clicking on the color picker.

The CSS Code for our container style so far looks like (added or changed items in bold):

#container
{
width: 90%;
margin: 10px auto;
background-color: #ffffff;
border: 1px solid #333333;
}

Type Category

In the CSS Rule Definition for #container in mystyle.css dialog box, choose the Type category in the box to the left.

The Type Category contains styles that effect the way text looks, such as the color, line spacing, font etc. In the #container style we can set defaults for the whole web page such as color and line height. To increase readability, you can increase the overall line-height of text. If it is applied to this main div, it will cascade down throughout all divs below. The rule can be written as "line-height: 130%;".

In the Type category select the following or similar options:

- For Color type #333333 or select a color by clicking on the color picker.
- For Line Height type 130 for the value then choose % from the drop down menu.

The CSS Code for our container style so far looks like (added or changed items in bold):

#container
{
width: 90%;
margin: 10px auto;
background-color: #ffffff;
border: 1px solid gray;
color: 333333;
line-height: 130%;
}

Once satisfied with the styles for the #container click on OK. To preview the changes first click Apply then make changes or click OK.

Adding style to the header div - #header

To add styles to the header div , first we need to declare a new CSS Rule.

1. Click on the New CSS Rule icon in the CSS Panel.
2. In the New CSS Rule dialog box make sure the following settings are set.

- For Selector Type select Advanced
- In the Selector text box type #header
- In the Define in: drop down menu select mystyle.css or an appropriate CSS file name.

3. Click on OK.

This will create this new CSS Rule in the external style sheet.

#header - Background Category

In the Background category select the following or similar options:

- For Background Color type #DDDDDD or select a color by clicking on the color picker.

#header - Box Category

In CSS Rule Definition for #header in mystyle.css dialog box appears, choose the Box category in the box to the left.

In the Box category select the following or similar options:

- For Padding check Same for all
- Type .5 em (select ems from the drop down menu)

#header - Border Category

In the Border category select the following or similar options:

- For Style uncheck Same for all then for bottom choose Solid
- For Width uncheck Same for all then for bottom type 1 px (select pixels from the drop down menu)
- For Color uncheck Same for all then for bottom type #333333 or select a color by clicking on the color picker.

#header CSS Code

The CSS Code for our header style so far looks like (added or changed items in bold):

#header
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

Adding style to the sidebar div - #sidebar1

To add styles to the sidebar div , first we need to declare a new CSS Rule.

1. Click on the New CSS Rule icon in the CSS Panel.
2. In the New CSS Rule dialog box make sure the following settings are set.

- For Selector Type select Advanced
- In the Selector text box type #sidebar1
- In the Define in: drop down menu select mystyle.css or an appropriate CSS file name.

3. Click on OK.

This will create this new CSS Rule in the external style sheet.

#sidebar1 - Box Category

In CSS Rule Definition for #sidebar1 in mystyle.css dialog box appears, choose the Box category in the box to the left.

In the Box category select the following or similar options:

- For Width type 12 for the value then choose ems from the drop down menu.
- For Float choose left from the drop down menu.
- For Padding Uncheck Same for all
- Type the following values:
Top: 15 px (select pixels from the drop down menu)
Right: 0 px
Bottom: 15px
Left: 0 px

Since the element is floated, a width must be given. Top and bottom padding create visual space within this div.

#sidebar1 CSS Code

The CSS Code for our header style so far looks like (added or changed items in bold):

#sidebar1
{
float: left;
width: 12em;
padding: 15px 0;
}

Adding style to the content div - #content

To add styles to the content div , first we need to declare a new CSS Rule.

1. Click on the New CSS Rule icon in the CSS Panel.
2. In the New CSS Rule dialog box make sure the following settings are set.

- For Selector Type select Advanced
- In the Selector text box type #content
- In the Define in: drop down menu select mystyle.css or an appropriate CSS file name.

3. Click on OK.

This will create this new CSS Rule in the external style sheet.

#content - Box Category

In CSS Rule Definition for #content in mystyle.css dialog box appears, choose the Box category in the box to the left.

In the Box category select the following or similar options:

- For Margin Uncheck Same for all
- Type the following values:
Top: 0 px (select pixels from the drop down menu)
Right: 20 px
Bottom: 0 px
Left: 13 ems

The right margin an be given in percentages or pixels. It creates the space down the right side of the page.

#content CSS Code

The CSS Code for our header style so far looks like (added or changed items in bold):

#content
{
margin: 0 20px 0 13em;
}

Adding style to the footer div - #footer

To add styles to the footer div , first we need to declare a new CSS Rule.

1. Click on the New CSS Rule icon in the CSS Panel.
2. In the New CSS Rule dialog box make sure the following settings are set.

- For Selector Type select Advanced
- In the Selector text box type #footer
- In the Define in: drop down menu select mystyle.css or an appropriate CSS file name.

3. Click on OK.

This will create this new CSS Rule in the external style sheet.

#footer - Box Category

In CSS Rule Definition for #footer in mystyle.css dialog box appears, choose the Box category in the box to the left.

In the Box category select the following or similar options:

- For Padding check Same for all
- Type .5 em (select ems from the drop down menu)
- For Margin check Same for all
- Type 0 px (select px from the drop down menu)

#footer CSS Code

The CSS Code for our header style so far looks like (added or changed items in bold):

#footer
{
clear: both;
margin: 0;
padding: .5em;
}