Driven mad by a 3 column layout with divs

liunx · Jan 12, 2008

Driven mad by a 3 column layout

I am driven nearly to insanity buy a 3 column layout using div tags. What I am trying to do is to create a page consisting out of 3 columns the two outer columns must have a fixed width and the middle column must resize when the browser window is resized. I am using the following code

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Div3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE type=text/css media=screen>@import url( css/style3.css ); </STYLE>
<body>

<div id="LeftColumn">
LeftColumn
LeftColumn
LeftColumn
LeftColumn
</div>

<div id="RightColumn">
RightColumn
</div>

<div id="MainContent">
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
MainContent
</div>

</body>
</html>

And to this hatml I apply the following styles:

#LeftColumn {
float: left;
margin: 0px 5px;
width: 140px
}

#RightColumn {
float: right;
margin: 0px 5px;
width: 130px
}

#MainContent {
padding: 0px;
margin: 0px 150px 0px 160px;

}

Now the problem that I encounter in IE6 is that for some reason all of the text entered in the MainContent div is slightly shifted right alongside the text in the left column. This dose not happen in firefox though. Help this is driving me mad.<a class="postlink" href="http://www.positioniseverything.net/explorer/creep.html">http://www.positioniseverything.net/explorer/creep.html</a>

Driven mad by a 3 column layout with divs

liunx

Guest