LIS 390W1A - Lab 19: 3 Column Layout

Today we will be tackling 3 Column Layouts in CSS. There is no natural, good way to do a 3 column layout in CSS. Therefore, every way of doing it is a hack. What follows makes excessive use of <div> tags, but aside from that, preserves most good HTML practices.

1. To start from scratch, download this HTML file and it's CSS file.

2. The goal of this lab, is to produce a file that has the following form:

   Header

   Left Column

   Center Column

   Right Column

   Footer

   This is a lot more difficult than it looks

3. You may want to copy and paste the following text.

   The following goes into the "body":

   	margin: 0em 0em 0em 0em;
   	padding: 0em 0em 0em 0em;
   			

   This text goes into the ".footer":

   	margin: 0em 0em 0em 0em;
   	padding: 1em 1em 1em 1em;
   	background-color: cyan;	
   	clear: both;
   			

   The rest of this text can be pasted anywhere in the css file:

   /* Header Styles */
   
   .header {
   	margin: 0em 0em 0em 0em;
   	padding: 1em 1em 1em 1em;
   	background: blue;
   	color: white;
   	border: 1px solid black;
   	}
   
   
   /* Body Styles */
   
   .col-left {
   	margin: 0em 0em 0em 0em;
   	padding: 1em 1em 1em 1em;
   	background: red;
   	border: 1px solid black; 
   	}
   	
   .col-center {
   	margin: 0em 0em 0em 0em;
   	padding: 1em 1em 1em 1em;
   	border: 1px solid black;
   	background-color: yellow;
   	}
   
   .col-right {
   	margin: 0em 0em 0em 0em;
   	padding: 1em 1em 1em 1em;
   	border: 1px solid black;
   	background-color: green;
   	color: white;	
   	}
   			

The other way to handle 3 column layouts is by taking advantage of table styling, i.e., using styles specified in the W3C - Tables page to accomplish what is recommended by the Web Style Guide - Layout Tables.

1. Open up the W3C - Tables and the Web Style Guide - Layout Tables in separate tabs or windows in your browser.
2. Download this HTML file and it's CSS file again, be sure to change the file-name if necessary so you don't accidentally overwrite all the work you just did.
3. Use the values for the "display" property in the W3C page to style the page appropriately.

There is nothing to turn in for this lab.