Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Exercise: Multi-Column Layout

DES300 Web Design I

Exercise: Multi-Column Layout

Most web pages these days consist of more than one vertical column. The most common arrangement is to have a column containing the navigation on the left, a wide section for the main content in the middle, and a third column on the right containing secondary links or ads. These multiple-column layouts used to be made with tables, but for a variety of reasons tables have given way to cascading style sheets. In this exercise you will create two variations on the multiple-column layout using style sheets.

Assignment

Create two different multiple-column html pages—one flexible and one fixed-width—using CSS.

Layout 1: Flexible Widths

1. Save this HTML file to your computer.
2. Create a root folder for this exercise called yourname_columns.
3. Open the HTML document in Dreamweaver and save it into the root folder as yourName_flexColumns.html.
4. In the body, add <div> tags with id attributes around each item/paragraph section:

<div id="header">
<h1>Sample Page</h1>
<h2>Subheading</h2>

</div>

 

<div id="columnLeft">
<h3>Item 1</h3>
<p>Lorem ipsum..etc.</p>

</div>

 

<div id="columnMain">
<h3>Item 2</h3>
<p>Pelletesque sem diam,...etc.</p>

</div>

 

<div id="columnRight">
<h3>Item 3</h3>
<p>Vestibulum ac ipsum...etc.</p>

</div>

 

<div id="footer">
<p>Copyright 2006</p>

</div>

Note that you are dividing the document into 5 separate sections using <div> tags. Each <div> tag has an "id," a specific name for which we can write styles that will apply to only that section.

5. Now in the header put the following styles:

<style type="text/css">

<!--

#columnLeft {
width: 30%;
float: left;
padding: 0;
}

#columnMain {
width: 35%;
float: left;
padding: 0;
}

#columnRight {
padding: 0;
float: left;
width: 35%
}

#footer {
clear:both;
}

p {
margin: 0 1.5em 1em 0;
}

-->

</style>

The styles define the widths of the <div> sections (as a percentage) and position them by using a "float: left" instruction. Float: left causes whatever comes after the <div> block to wrap beside the block, thus the columns appear side-by-side.

Layout 2: Fixed Widths

1. Open the html document above and save it with a new name: yourName_fixedColumns.html
2. In the body, add the new set of <div> tags shown below (in red). These surround the first and second columns, creating a larger single element that we can float as a unit:

<div id="header">
<h1>Sample Page</h1>
<h2>Subheading</h2>

</div>

 

<div id="enclose">

<div id="columnLeft">
<h3>Item 1</h3>
<p>Lorem ipsum..etc.</p>

</div>

 

<div id="columnMain">
<h3>Item 2</h3>
<p>Pelletesque sem diam,...etc.</p>

</div>

</div>

 

<div id="columnRight">
<h3>Item 3</h3>
<p>Vestibulum ac ipsum...etc.</p>

</div>

 

<div id="footer">
<p>Copyright 2006</p>

</div>

3. Now in the header replace the styles writen above with these:

<style type="text/css">

<!--

body {
width: 900px;
}

#columnLeft {
width: 290px;
float: left;
}

#columnMain {
width: 300px;
float: right;
}

#columnRight {
width: 290px;
float: right;
}

#enclose {
width: 600px;
float:left;
}

#footer {
clear:both;
}

-->

</style>

 

This one's a little trickier. The left column floats:left to allow the middle column to move up next to it. But then both of these columns are wrapped in a <div> called "enclose", and this section is made to float:left as well, allowing the right column to slide up next to it.

4. Embellish. I've given you the bare minimum for style. Now customize the pages: add background colors; change fonts & sizes; play with margins & padding; tinker with the widths; even add an image or two; etc. Be creative. Experiment.

Deliverables

Upon completion, give me a copy of your root folder for this project (with both files within).

Deadline

Next week.

Class schedule

Syllabus

Student resource index