Nested Divs in IE6 problem

[pippin62]

I've looked in vain for a solution to this, validated code and wasted hours of time. I want to create a simple layout consisting of a series of three columns nested inside one column of another series of three columns, resulting in a five column layout. With no white space or gaps between the columns. It works well in everything except IE6, which puts a margin either side of the nested divs, pushing the set of columns beneath the container. Any help would be hugely appreciated! My CSS is below…

body
{
margin: 0;
padding: 0;
font-size: 95%;
font-family: georgia, times, "times new roman", serif;
color: #000;
background-color: #fff;
}

#mainWrap {
width: 790px;
background-color: orange;
}


#mainWrapOne {
width: 178px;
background-color: green;
float: left;
}

#mainWrapTwo {
width: 459px;
background-color: red;

}


#threeColWrap
{

background-position: right;
width: 459px;
overflow: hidden;
}


#colOne
{
float: left;
width: 153px;
background-color: #333;
}


#colTwo
{
margin-left: 153px;
margin-right: 153px;
background-color: #666;
}


#colThree
{
float: right;
width: 153px;
margin: 0;
color: #000;
background-color: #ccc;
}

p {
margin: 0;
}

[KDLA]

Try this:
* {margin: 0; padding: 0;}
WebJoel taught me that one, and it's saved me many an IE woe. ;)
KDLA

[toicontien]

You could be running into the Expanding Boxes Problem (http://www.positioniseverything.net/explorer/expandingboxbug.html) in Internet Explorer.

[WebJoel]

I've looked in vain for a solution to this.... ....My CSS is below…
Your CSS looks fine. Correct, anyway. But without seeing the HTML also... it's anybody's guess what is wrong. (and I'm not willing to write a "...simple layout consisting of a series of three columns nested inside one column of another series of three columns, resulting in a five column layout. With no white space or gaps between the columns..." to try to test this...) :o

[pippin62]

Hi,

Thanks for all your replies. I think I have solved the problem myself.

Here's my amended CSS:

body
{
margin: 0;
padding: 0;
}


#mainColWrap
{
width: 500px;
background-color: blue;
height: 150px;
}


#mainColOne
{
float: left;
width: 100px;
background-color: red;
height: 120px;
}


#mainColTwo
{
float: left;
width: 300px;
background-color: green;
height: 120px;
}


#mainColThree
{
float: left;
width: 100px;
background-color: yellow;
height: 120px;
}




#threeColWrap
{
width: 300px;
background-color: #999;
height: 100px;
}


#colOne
{
float: left;
width: 100px;
background-color: #333;
height: 90px;
}


#colThree
{
float: left;
width: 100px;
background-color: #ccc;
height: 90px;
}


#colTwo
{
float: left;
width: 100px;
background-color: #666;
height: 90px;
}

p {
margin: 0;
}

And here's the HTML:

<div id="mainColWrap">
<div id="mainColOne"><p>One</p></div>
<div id="mainColTwo">
<div id="threeColWrap">
<div id="colOne"><p>One</p></div>
<div id="colTwo"><p>Two</p></div>
<div id="colThree"><p>Three</p></div>
</div>
</div>
<div id="mainColThree"><p>Three</p></div>
</div>

It seems fine in IE6, I don't know where I was going wrong before though.