LIS 390W1A - Lab 19: 3 Column Layout

Assignment

Below are links to the files I created in class:

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.

3-Col using CSS "float"

  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

    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;	
    	}
    			

3-Col using CSS table formatting

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.

Submission

There is nothing to turn in for this lab.