ie6 and floats ruining my life

Hi. Am making a site and used Matthew James Taylor's perfect two column layout ... it looks exactly how I want it to look on firefox, safari, chrome, and ie7. http://mledavis.fastmail.fm/fix-me/site-good.png

On ie the main content div is smashed up against the menu on the left, and some of it shows up UNDER the menu. The nice border on the right side of the menu is pushed out from the menu (the faux-drop-down sub menu is supposed to be pushed out from the main set, and should be on top of the border as in firefox, chrome, etc). It's ugly. http://mledavis.fastmail.fm/fix-me/site-bad.png

I did try making all my overflows: hidden; I did try adding display: inline;, but this changed nothing and I don't think that's the problem.

This is a portfolio to help me find a new job, and I need this to look good. Any help would be greatly appreciated. Code below, and links to mock-up duplicates (can't post original for legal reasons as there are student photos).

THANKS.

CSS:


/* General styles */
body {
padding: 0;
margin: 0;
border: 0;
background: #F6F0E6;
width:100%;
min-width:600px;
font: normal 80% arial, verdana, helvetica, sans-serif;
color: #333
}


/* Header styles */

#header {
clear:both;
float:left;
width:100%;
background-color: #778899;
border-bottom: 6px solid #fff;
padding: 0;
height: 200px;
background-image: url('log.png');
background-repeat: no-repeat;
text-align: right;
}

#header p {
font-weight: bold;
font-size: 1.3em;
color: #F6F0E6;
margin: 30px;
}




/* column container */


.container {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}


/* 2 column left menu settings */
.sidelinks {
padding: 0;
margin: 0;
}

.sidelinks .content {
float:left;
width:200%;
position:relative;
left:196px;
background: #F6F0E6;

}

.sidelinks .col1wrap {
float:right;
width:50%;
position:relative;
right:200px;

}

.sidelinks .col1 {
margin:0 15px 0 215px;
position:relative;
right:100%;
overflow: hidden;
}

.sidelinks .col1 .meat {
width: 660px;
margin: 50px auto;
text-align: center;
margin-top: 30px;
background: #F6F0E6;
overflow: visible;
}

.sidelinks .col1 .meat p {
max-width: 600px;
text-align: justify;
line-height: 160%;
margin: 2em auto;

}
.sidelinks .leftcol {
float:left;
width:196px;
position:relative;
right: 200px;
border-right: 4px solid #778899;
}

/* Header styles */

h2 {
text-align: center;
font-size: 1.3em;
border: 1px #778899 solid;
padding: 6px;
background-color: #fff;
margin: 20px -30px;
color: #708090;
overflow: visible;
}

h3 {
text-align: center;
font-size: 2em;
color: #708090;
text-shadow: 2px 2px 0px #fff;
margin: 0 0 30px 0;
border-bottom: 4px #778899 double;
}

h4 {
font-size: 1.2em;
color: #708090;
text-shadow: 1px 1px 0px #fff;
}
h5 {
font-size: 1.1em;
text-align: center;
color: #708090;
padding: 0;
margin: 0;
letter-spacing: 3px;
font-weight: bold;
}

/* Link styles */

.leftcol {
width: 210px;
text-align: right;
padding: 10px 0 0 0;
margin: 0;
height: 100%;

}

.leftcol ul {
margin: 5px 10px 5px 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
}

.leftcol a {
display: block;
padding: 20px 10px;
margin: 10px 0;
width: 176px;
height: 100%;
}

.leftcol a:link, .leftcol a:visited {
color: #708090;
text-decoration: none;
}

.leftcol a#current {
background-color: #778899;
color: #fff;
}
.leftcol a:hover {
background-color: #c1cdc1;
color: #708090;
}

#header a {
color: #F6F0E6;
}

#header a:link, #header:visited {
color: #F6F0E6;
text-decoration: none;
}

#header a:hover, #header:active {
color: #fff;
}

a:link.inline, a:visited.inline {
font-weight: bold;
text-decoration: none;
color: #4a708b;
border: 2px solid transparent;
border-bottom: 1px dotted #4a708b;
padding: 2px;
padding-bottom: 0;
}

a:hover.inline, a:active.inline {
color: #4a708b;
border: 2px solid #4a708b;
background: #fff;
}

/* Image styles */

img.classroomculture {
border: 2px #708090 solid;
margin-bottom: 10px;
text-align: center;
-moz-box-shadow: 3px 3px 4px #778899;
-webkit-box-shadow: 3px 3px 4px #778899;
box-shadow: 3px 3px 4px #778899;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899');
}

img.teachinghistory {
border: 2px #708090 solid;
float: left;
margin-right: 30px;
margin-bottom: 10px;
-moz-box-shadow: 3px 3px 4px #778899;
-webkit-box-shadow: 3px 3px 4px #778899;
box-shadow: 3px 3px 4px #778899;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899');
}

.sidelinks .col1 .meat p.picturecaption {
text-align: center;
color: #000;
font-style: italic;
margin-top: 2em;
padding: 8px;
background: #fff;
border: 1px #708090 solid;
}


/* Footer styles */

p.minifoot {
text-align: center;
margin:0;
padding: 0 0 20px 0;

}

#footer a:link, #footer a:visited, .minifoot a:link, .minifoot a:visited {
font-weight: bold;
text-decoration: none;
padding: 6px 20px 20px 20px;
color: #fff;
background-color: #778899;
border: 3px #c1cdc1 solid;
border-bottom: 0 #c1cdc1 solid;
}

#footer a:hover, #footer a:active, .minifoot a:hover, .minifoot a:active {
color: #708090;
background-color: #c1cdc1;
border: 3px #778899 solid;
border-bottom: 0 #333 solid;
text-decoration: underline;
}
#footer {
clear:both;
float:left;
width:100%;
text-align: center;
margin:0;
padding: 0;
border-top: 3px solid #c1cdc1;
border-bottom: 10px solid #778899;
}

#footer p {
padding:10px 10px 0 10px;
margin:0;
}


.inset a:link, .inset a:visited {
color: #708090;
padding: 6px 10px 6px 6px;
margin: 10px;
margin-left: 40px;
background-color: #c1cdcd;
width: 170px;
text-align: center;
border: 1px solid #708090;
font-size: .9em;
}

.inset a:hover, .inset a:active {
background-color: #9fb6cd;
color: #fff;
}

.inset a.here {
color: #708090;
padding: 6px 10px 6px 6px;
margin: 10px;
margin-left: 40px;
background-color: #778899;
width: 170px;
text-align: center;
border: 1px solid #708090;
color: #fff;
}

.inset a#special {
color: #708090;
padding: 6px 10px 6px 6px;
margin: 10px;
margin-left: 40px;
background-color: #f4a460;
width: 170px;
text-align: center;
border: 1px solid #708090;

}

.inset a#special:hover, .inset a#special:active, .inset a#hot{
color: #fff;
background: #ee7942;
}

ul.downloads {
line-height: 170%;
text-align: left;
}

.downloads a:link, .downloads a:visited {
color: #708090;
padding: 2px 2px 0 2px;
width: 170px;
text-align: center;
border-bottom: 2px solid #fff;
font-size: 1.1em;
font-weight: bold;
text-decoration: none;
}

.downloads a:hover {
background-color: #9fb6cd;
color: #fff;
border-bottom: 2px solid #708090;
font-weight: bold;
text-decoration: underline;
}


HTML:


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">

<head>

<title>title</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no" />

<link rel="stylesheet" media="print" type="text/css" href="portfolioprint.css" />
<link rel="stylesheet" media="screen" type="text/css" href="portfolioscreen.css" />


<style media="screen" type="text/css">
/* <!-- */

/* --> */
</style>


<!--[if lt IE 7]>
<style media="screen" type="text/css">
.col1 {
width:100%;
}
</style>


<![endif]-->


</head>

<body>

<div id="header">
<p>
text here
</p>
</div>


<div class="container sidelinks">

<div class="content">
<div class="col1wrap">
<div class="col1">


<!-- Right Column Start -->
<div class="meat">

<h5>Beginning ESL</h5>
<h3>Process Writing: Biographies</h3>

<p style="margin-top: 0px;">text here

</p>


<p style="text-align: center;">
<img class="classroomculture" src="monkeydog.png" height="446" width="500" alt="">
</p>



</div>

<p class="minifoot">
<a href="#header">Race to the Top</a>
</p>

<!-- Right Column End -->
</div>
</div>

<div class="leftcol">

<!-- link list start -->

<ul id="LinkList">
<li><a href="junk-index.html">Teacher for Hire</a></li>
<li><a href="#">My Teaching History</a></li>
<li><a href="#">Classroom as Evidence</a></li>
<li id="active"><a href="#" id="current">Sample Teaching</a></li>

<li class="inset"><a href="#">Evidence of Theme</a></li>
<li class="inset"><a href="#">Simple Definitions</a></li>
<li class="inset"><a href="#" class="here">Process Writing</a></li>
<li class="inset"><a href="#">Reading for Non-Readers</a></li>
<li class="inset"><a href="#">Differentiated Assessment</a></li>
<li class="inset"><a href="#">Regents Prep</a></li>
<li class="inset"><a id="special" href="#">Special Note</a></li>

<li><a href="#">Download Resume</a></li>
<li><a href="#">Other Downloads</a></li>
</ul>
<!-- link list end -->


</div>
</div>
</div>


<div id="footer">

</div>



</body>
</html>



code, screen shots / photos, everything available at
http://mledavis.fastmail.fm/fix-me/

Again, thank you.

<?xml version="1.0" encoding="utf-8"?>

Remove that xml prolog from the top, as IE6 will turn into quirks mode when it encounters anything above DOCTYPE.

Thanks for the suggestion. I put that in at the recommendation of the guy who wrote the two-column layout; without it it looks far, far worse. Good idea, but not the solution.

http://mledavis.fastmail.fm/fix-me/withoutXML.png

I put that in at the recommendation of the guy who wrote the two-column layout; without it it looks far, far worse. Good idea, but not the solution.
When you remove that line, IE6 renders the page in standard mode and the "real" issues in your markup gets revealed.
.sidelinks .content {
float:left;
width:200%;
position:relative;
left:196px;
background: #F6F0E6;

}

.sidelinks .col1wrap {
float:right;
width:50%;
position:relative;
right:200px;

}

.sidelinks .col1 {
margin:0 15px 0 215px;
position:relative;
right:100%;
overflow: hidden;
}
The way you've made the columns is not a proper one, I' say, especially when you need to get compatibility in IE6.

I'd recommend you to have a look at http://bonrouge.com/2c-hf-fluid.php, a simple and compatible 2 column layout, with only one float and a very few positions.

Seriously... IE6?