Hey, I've gotten a lot of useful information from searching through the forums here, but can't find any solution to this little problem. In short, the layout works perfectly in Firefox and Opera, however IE displays a little space on the left hand side between my header image and the containing div.

The layout can be found online at:

http://hybrid.concordia.ca/~nix112/

This image illustrates the differences between firefox and IE:



The HTML code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>David Nixon - Hybrid</title>
	<style type="text/css" media="all">
	@import url(css/style.css);
	</style> 
</head>
<body>
<div id="main">
	<div id="mainstyle">
		<div id="topbanner">
		</div>
		<div id="leftcontainer">
			<div id="themes">
				<div class="header">
				</div>
				<p>Walter Benjamin’s concept that the aura of a work of art is lost when it is mechanically reproduced.</p>
			</div>
			<div id="menu">
				<div class="header">
				</div>
				<p>Walter Benjamin’s concept that the aura of a work of art is lost when it is mechanically reproduced. Walter Benjamin’s concept that the aura of a work of art is lost when it is mechanically reproduced.</p>
			</div>
		</div>
		<div id="rightcontainer">
			<div id="content">
			<div class="header">
			</div>
			<p>
				Walter Benjamin’s concept that the aura of a work of art is lost when it is mechanically reproduced, 
				and subsequently the creation of art shifts to be specifically designed for the new reproducible medium 
				(photography and film) can be expanded upon when put in the context of the internet in general and the 
				website Wikipedia <a href="http://www.wikipedia.org">(www.wikipedia.org)</a> in particular. In other words, 
				the mechanical reproducibility of artworks is to classical art as internet digitalization and interactivity 
				of art is to mechanically reproducible artworks.<br><br>Within the context of a specific site, in this case 
				Wikipedia, and keeping 	in mind Benjamin’s thesis, the loss of classical artwork’s aura when viewed as a 
				photograph is paralleled by the loss of a photograph’s aura when viewed as a digital copy. When viewing a 
				photograph on a computer monitor, there is no longer a physical attachment to it, and it can longer have a 
				physical history of its own. Despite the fact that this aura is again lost, mirroring the history of photography 
				and film, new art is being generated specifically for the Internet. The Wikipedia website is a good example 
				of a new work that is being generated specifically for the internet where a conglomeration of ideas and photographs are 
				freely editable by anyone who visits the site.<br><br>Another example of the parallels between the shifts 
				from classical art to reproducible art, and reproducible art to digital art is the way in which society 
				uses art. When society was confronted with the advent of mechanical reproducibility Benjamin points to 
				a shift from art for cult, or ceremonial purposes to art for viewing purposes. Similarly, with the onset 
				of society’s digitalization there is a move from art for viewing purposes to art for interactive purposes. 
				The Wikipedia example of editable content illustrates this new purpose of interactivity well, as do many 
				other websites and digital applications.<br><br>Benjamin points out that the reproducibility of art allows 
				for increased accessibility. Photographs, films and records can be brought into the average person’s home 
				for instance. In the digital age, this accessibility within the context of interactivity allows not only 
				for yet more people to view art, but also to interact and create art through software or CAD systems. In 
				fact one could argue that we have already progressed beyond this paradigm with the appearance of autonomous 
				art and music creating artificial intelligence.<br><br>Benjamin’s assertion that the aura of an artwork 
				dies when transformed by reproduction is only meant to point out that with the destruction of old auras, 
				comes the birth of the new ones. Who could argue that when holding and viewing an historical photograph 
				of great importance there is a certain tradition and authority that is bestowed upon it, analogous to the 
				aura of a classical work? Perhaps it is hard to see now but certainly these new ‘lifeless’ digital works, 
				Wikipedia among them, will come to be revered as having auras of their own once we’re confronted with 
				another paradigm shift in the world of art.			
			</p>
			</div>
		</div><div class="clear">&nbsp;</div>
	</div>
</div>
</body>
</html>
The CSS code:

Code:
/* CSS Document */

html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #C7B299;
	background-image: url(../images/background.jpg);
	background-position: center;
	background-repeat: repeat-y;
	text-align: center;
	}

h2 {
	margin: 10px;
	}

p {
	margin: 10px;
	}
	
/* ID's */

#main {	
	width: 750px;
	height: 100%;
	margin-right: auto;
	margin-left: auto; 	
	background-color: #cccccc;
	text-align:left;
	}

#mainstyle {	
	border-left: 10px ;
	border-right: 10px;
	border-top: 10px;
	border-color: #ccc;
	border-style: solid;
	background-color: #cccccc;		
}
	
#topbanner {
	margin-bottom: 10px;
	width: auto;
	height: 220px;
	background-color: #ccc;
	background-image: url(../images/banner1.jpg);
	background-repeat: no-repeat;
	}

#leftcontainer {
	float: left;
	width: auto;
	height: auto;
	background-color: #ccc;
	}

#themes {
	margin-bottom: 10px;
	width: 140px;
	height: auto;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	}

#menu {	
	margin-bottom: 10px;
	width: 140px;
	height: auto;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	}
	
#rightcontainer {
	margin-left: 152px;
	width: auto;
	height: auto;
	background-color: #ccc;
	}
	
#content {
	margin-bottom: 10px;
	width: auto;
	height: auto;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	}

/* Classes */

.header {
	height: 32px;
	width: auto;
	background-color: #990000;
	background-image: url(../images/header1.jpg);
	background-repeat: no-repeat;
	border-bottom: 1px solid #000000;
}

.clear{
  clear: both;
/* These next attributes are designed to keep the div
height to 0 pixels high, critical for Safari and Netscape 7 */
  height: 1px;
  overflow: hidden;
  margin-bottom: -1px;
}

* html .clear{display:none} /* Stops IE browsers from displaying
the clear div/br in the page, as these are for Moz/Opera and
Safari only. If IE 5.x Win DID display these, the page is too high */

/* Links */

a:link { color: #000000 }

a:visited { color: #000000 }

a:active { color: #000000 }

a:hover { color: #000000 }
Apart from this little bug everything works fine for the latest versions of Firefox, Opera, and IE. Thanks in advance for any help!