Three-Column Basic Layout

This three-column layout also uses positioning to achieve the layout. It uses the basic two-column layout but adds another paragraph of text. This text is enclosed in a new DIV called "rightcolumn". This will become the third column of the three-column layout.

This EXAMPLE shows how the basic HTML (without any styling) is rendered.

Try it!

Insert a new paragraph or two into your two-column layout document and save it as 3_col.html. Follow along with this lesson to adjust the styling for your new three-column layout design.

Step 1: Positioning the Navigation

The navigation is set up just like the two column layout. Reset the BODY margins to 0. Position the navigational links absolutely to break them out of the flow of the document. Set the WIDTH and a right border to temporarily to verify positioning. Set the LEFT and TOP to zero so that the top left corner is aligned with the top left corner of the containing element (BODY tag). EXAMPLE

body { margin: 0px; padding: 0px; }¹


 
div#nav  {
  position: absolute;
  width: 150px;
  border-right: 2px solid red;


  left: 0px;
  top: 0px;
  }

-----
¹remove default settings

²remove red border after testing

Step 2: Positioning the Right Column

Earlier, we discussed how top and left are the most commonly used offset properties for positioning. This is an example of using right to position a column along the right edge.

The two side columns must be positioned absolutely. The left column (navigation) is positioned with LEFT set to 0 pixels and the right column will be positioned with RIGHT set to 0 pixels. This will force the right column to be positioned against the right edge of the browser window. This is an example of a fluid design. If you resize the browser window, you can see that the elements flow with the window size. EXAMPLE

div#rightcolumn  {
  position: absolute;
  width: 125px;
  top: 0px;
  right: 0px;
  border-left: 2px solid red;
  }

Step 3: Left/Right Margins of Content Area

At the moment, the content area (the middle column) is invading the space of the left and right columns. To correct this, adjust the left and right content margins. In this example, the content margins are set right up against the left and right columns. We'll adjust that later... but you can see the three-column layout starting to come together. EXAMPLE

div#content  {
  margin-left: 150px;
  margin-right: 125px;
  }

Step 4: Presentation

The same styling used for the two-column layout was used in this three-column layout. EXAMPLE Resize the example window so you can see how the three columns flow with the new window size. Now that you know how to do it, see if you can adjust the styling to make it more interesting.

Set the BODY font and size.
Adjust the spacing of the navigation links.
Add a rule(s) to highlight the links.
Style the links.
Adjust spacing and padding in the content.
Style the content.
Once the testing is complete, remove the red testing border.

body  {
  margin: 0px; padding: 0px;
  font: 1em "comic sans ms", helvetica, arial, sans-serif;
  }
 
div#nav  { 
  position: absolute;
  width: 150px;
  border-right: 2px solid red;


  left: 0px;
  top: 0px;
  padding: .5em 0 0 0 ;
  margin: 22px 0 0 15px;
  border-top: 2px solid #069;
  border-bottom: 1px solid #069;
  }

style the list


div#nav ul {margin-top: 0px; margin-bottom: .8em; }
div#nav li {
  margin-bottom: .5em; 
  font-weight: bold; 
  font-size: .76em; 
  }
 
div#content  {
  margin-top: 20px;
  margin-right: 150px;
  margin-bottom: 0;
  margin-left: 165px;
  padding: 0 1em;
  }

style the text in the content

div#content   h1  { font-size: 1em; }
div#content   p  { font-size: .8em; }
div#content   li  { font-size: .76em; }
 
div#rightcolumn  {
  position: absolute;
  width: 125px;
  top: 0px;
  right: 0px;
  border-left: 2px solid red;


  margin: 20px 15px 0 0 ; padding: 1em .5em;
  border-top: 2px solid #069;
  border-bottom: 1px solid #069;
  }

style the text in the right column

div#rightcolumn p  {
  font-size: .76em;
  }

-----
¹remove red border after testing

Experiment with this Layout

What happens if you change to fixed from absolute positioning in this layout? What is an alternative to using pixel values for the widths??

Three-Column Absolute Layout