The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Small IE problem with layout

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.

<!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>

Indeed, it works perfectly! Thanks very much. This will be the third hack I've used in making this layout. I wonder if I should just try a simpler layout to avoid any future problems. Anyhow, thanks again for your help.

Yes, that is what I tried originally. However, again IE gave problems as the supposed correct width that worked in Opera and Firefox was too wide for the space in IE and would cause the #rightcontent to drop below the leftcontent boxes. I suppose this has to do with the box model and how IE handles padding, borders and margins. Maybe if I add those attributes in another wrapper div like I did with the #main ID. Anyhow I'll figure something out.

The problem actually relates to ie's 3 pixel jog on static content next to floats and not the box model (in ie6 anyway). This means that when you specify a width ie has already added 3 pixels on so the element drops below. As you are workin with a full doctype (with uri) then ie6 works with the correct box model so this isn't the issue here.

There a long explanation in the FAQ about floats and how to overcome this but in a fixed width layout the simple answer is to float both left and right and the 3 pixel jog is defeated.