I am currently trying to solve a problem with my site's CSS. It works great in FF and Safari, but fails in IE6 and IE7.

The site in question is http://waylonrobert.com

For convenience, here is my CSS:

Code CSS:
@charset "UTF-8";
/* CSS Master for [url]www.waylonrobert.com[/url]
----------------------------------
Author: Waylon Baumgardner (waylonrobert@gmail.com) - ([url]www.waylonrobert.com[/url])
Creation: March 13, 2008
Revision No.: 7
Revision Date: February 3, 2009
Copyright: All rights reserved. 
(Stradivarius - [url]http://en.wikipedia.org/wiki/Stradivarius[/url])
----------------------------------
*/
 
/* ----- PAGE LAYOUT ------------------------------------------------- */
 
html, body { 
 	margin: 0; 
 	padding: 0; 
 	text-align: center; 
 	background:#59460f url(/images/woodbg3.jpg) repeat fixed left top;
 	color: #eae5d8;
 	font-family: Georgia, sans-serif;
 	font-size: 13px;
} 
 
 /* *** Float containers fix:
 [url]http://www.csscreator.com/attributes/containedfloat.php[/url] *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */ 
 
/* --- TYPOGRAPHY --- */
 
h1 {
	font-family: "Rockwell", serif;
	font-size: 20px;
	font-weight: normal;
	color: #f8f5c0;
	text-align: left;
}
 
h2 {
	font-family: "Rockwell", serif;
	font-size: 14px;
	font-weight: normal;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	color: #f8f5c0;
	text-align: left;
}
 
a:link, a:visited {
    color: #F8F5C0;
	font-weight: bold;
}
 
a:hover {
	background-color: #573910;
}
 
a:visited {
	text-decoration: none;
}
 
.highlight {
	background-color: #000;
}
 
/* --- CONTENT CLASSES --- */
 
a img {
	border: 0;
}
 
.pagewidth { 
 	width: 800px; 
 	text-align:left;  
	margin-left: auto; 
 	margin-right: auto;  
} 
 
.section {
 	width: 800px;
 	height: 65px;
 	background: transparent;
 	margin-top: 20px;
}
 
.section2 {
  	width: 800px; 
 	text-align:left;  
	margin-left: auto; 
 	margin-right: auto; 
}
 
.workDES {
	width: 400px; 
 	float: left; 
 	text-align: left;
 	line-height: 1.5em;
 	position: absolute;
 	margin-left: 8px;
 	padding: 10px 5px 10px 5px;
}
 
 
.workIMG {
 	float: right;
 display: inline-block;
 	position: relative;
 	width: 400px;
clear: both; 
}
 
.shell {
	background:url(/images/work-bg.png) no-repeat;
	text-align: center;
	width: 800px;
	height: 245px;
	margin-top: 20px;
}
 
.marginauto {
	margin: 20px auto;
}
 
ul {
 	list-style-position: outside;
 	list-style-image: none;
 	list-style-type: none;
 	padding: 5px;
}
 
.testli li {
background:transparent url(/images/arrow.png) no-repeat scroll 0 4px;
padding: 0 20px 0 20px;
}
 
/* ----- MASTHEAD ------------------------------------------------- */
 
#top {	
	background:transparent url(/images/toptest.png) repeat-x;
	width: 100%;
	height: 45px;
}
 
#masthead {	
	margin: auto;
	height: 175px;
}
 
/* ----- NAVIGATION ------------------------------------------------- */
 
.navtop {
    width: 800px;
    height: 48px;
    margin: auto auto;
}
 
/* --- BUTTONS --- */
a.wsa { 
    background:url(/images/wsa2.png) repeat 0px 0px; 
    width: 150px; 
    height: 43px; 
    display: block; 
}
 
a.wsa span { 
    display: none; 
}
 
a.wsa:hover { 
    background: url(/images/wsa2.png) repeat 0px -43px; 
}
 
a.logoa { 
    background:url(/images/logoa.png) repeat 0px 0px; 
    width: 150px; 
    height: 43px; 
    display: block; 
}
 
a.logoa span { 
    display: none; 
}
 
a.logoa:hover { 
    background: url(/images/logoa.png) repeat 0px -43px; 
}
 
a.printa { 
    background:url(/images/printa.png) repeat 0px 0px; 
    width: 150px; 
    height: 43px; 
    display: block; 
}
 
a.printa span { 
    display: none; 
}
 
a.printa:hover { 
    background: url(/images/printa.png) repeat 0px -43px; 
}
a.contacta { 
    background:url(/images/contacta.png) repeat 0px 0px; 
    width: 150px; 
    height: 43px; 
    display: block; 
}
 
a.contacta span { 
    display: none; 
}
 
a.contacta:hover { 
    background: url(/images/contacta.png) repeat 0px -43px; 
 
}
 
/* --- NAV CLASSES --- */
 
.topli {
float: right; /* This pushes the buttons to the right - make sure right order in HTML */
}
 
/* ----- FOOTER ------------------------------------------------- */
 
#foot {
	background:url(/images/footbg4.png) repeat-x;
	width: 100%;
	height: 325px;
	margin: auto auto;
}
 
#foot2 {
	padding: 10px 5px 0px 5px;
	background: url(/images/footerpbg.png) repeat-x;
	height: 25px;
	width: 800px;
	margin: auto auto;
}
 
/* --- FOOTER CLASSES --- */
 
.shell2 {
	background: transparent;
	text-align: center;
	width: 800px;
	height: 275px;
	margin: auto auto;
	margin-bottom: 10px;
}
 
.foot1 {
 	width: 400px; 
 	float: left; 
 	text-align: left;
 	line-height: 1.5em;
 	clear: both;
 	position: absolute;
 	margin-left: 8px;
 	padding: 26px 5px 10px 5px;
}
 
.foot2 {
 	float: right;
 	display: inline;
 	position: relative;
 	width: 400px; 
  	padding: 26px 5px 10px 5px;
   	text-align: left;
}
 
.pfoot1 {
 	padding-right: 45px;
}
 
.footer {
	clear: both;
	font-size: 11px;
	margin: auto;
	text-align: left;
	width: 800px;
}
 
.left {
	float: left;
}
 
.left span {
	margin: 0 0 0 5px;
}
 
.right {
	float: right;
}
 
.right span {
	margin: 0 5px 0 36px;
}

I've tried several things but I can't get the left column to align properly. Any suggestions? Thanks!