LIS 390W1A - Lab 16: 3 Column Layout

This lab has been canceled.

Given that the lab was canceled, here are the files I used as demonstration files in class: HTML & CSS.

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:

   	margin: 0em 0em 0em 0em;
   	padding: 0em 0em 0em 0em;
   
   
   /* 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;	
   	}
   
   /* Footer Styles */
   
   .footer {
   	font-style: italic;
   	font-size: 80%;
   	border-top: 2px solid black;
   
   	margin: 0em 0em 0em 0em;
   	padding: 1em 1em 1em 1em;
   	background-color: cyan;	
   	clear: both;
   	}
   
   .cluster {
   	margin: 1em 0em 1em 0em;
   	}
   			

To turn in your assignment, please upload it to your GSLIS I: Drive and email me a link.

Out of 25 points total.

• HTML validation (link + successful validation): 1 point
• CSS validation (link + successful validation): 1 point
• Scoring 95% or better with the Functional Accessibility Evaluator, or providing a reasonable explanation in your forum post as to why the score was less: 3 points
• Getting the three column layout working: 20 points