IE6 problem with Multiple Floats

Hi everyone! I'm really stuck on this one and could use a fresh set of eyes.

I'm trying to make a family tree using only HTML and CSS. I was doing great until I got to the very last set of children. Ugh! . . .

This family tree will have three columns of boxes with family names and connecting lines between the boxes from the parent to the children boxes. It works great in FF, IE7, Safari but of course IE6 it doesn't work.

Even though there is very little content on this page, it is a little long because there are so many elements.

The approach I've used is a series of eight divs all floated left. Each div or column contains either boxes with the family names or empty boxes(width & height specified) with borders to create the connecting lines between the family names.

The first seven divs all float correctly with the content (boxes with names or boxes with borders) except for the very last div with falls under all the rest--only in IE6.

I have validated the CSS and the HTML.
I've tried clearing elements below the floated divs.
I've enclosed all this inside a containing div. With and without padding, margins, float, width and height specified or not.
I tried adding additional columns (div) so the div in question was not the last div.
I even rebuilt it from scratch.

I don't understand why this works on the first six but not on the last column.

I've run out of ideas. I've have spent DAYS on this.

Again, this works perfectly in IE7, FF, Safari but not IE6.

Could someone take a look at this for me?

Here's the CSS and the HTML. You should be able to copy this into a file and bring up in your browser.

---------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style>

body,td,th { font: 100%/1.2em Geneva, Arial, Helvetica, sans-serif; color: #4B4F3C; background-color:

#A4A78D; }

#parentscolumn {float: left; padding-top: 0px; margin-top: 100px; height: 200px;}
#centercolumn { float: left; padding-top: 0px; margin-top: 100px; height: 200px;}

#centercolumnright { float: left; padding-top: 15px; margin-top: 120px; height: 200px; }

#childrencolumnleft {float: left; margin-top: 1em;}

#childrencolumn { float: left; margin-top: 0em; height: 500px; width: 130px;}

.boxtopmargin1 {margin-top: 60px;}

.box {border: 1px solid #484F3c;}
.box a {display: block; color:#4B4F3C; background: #EEE; text-decoration:none; padding: 20px; }
.box a:hover {background: #B6B9A4;}
.box li.active a {background: #B6B9A4;}

.box2 {border: 1px solid #484F3c; margin-bottom: .5em;}
.box2 a {display: block; color:#4B4F3C; background: #EEE; font-size: .9em; text-decoration:none;

padding: .25em; }
.box2 a:hover {background: #B6B9A4;}
.box2 li.active a {background: #B6B9A4;}

#parentslinesright {float: left; margin-left: 0px; margin-top: 195px; margin-bottom: 0px; margin-right:

0px; width: 40px; height: 120px; border-top: solid 1px #000; border-right: solid 1px #000;

border-bottom: solid 1px #000;}

#centerlinesleft {float: left; margin-top: 245px; margin-left: 0px; width: 20px; height: 10px;

border-bottom: solid 1px #000;}

.verticallines {margin-left: 0px; width: 70px; height: 60px; border-right: solid 1px #000;}

#centerlinesrighttop {margin-left: 0px; margin-top: 0px; margin-bottom: 0px; margin-right: 0px; width:

40px; height: 120px; border-top: solid 1px #000; border-right: solid 1px #000; border-bottom: solid 1px

#000;}

#centerlinesrightbottom {margin-left: 0px; margin-top: 0px; margin-bottom: 0px; margin-right: 0px;

width: 40px; height: 120px; border-top: solid 0px #000; border-right: solid 1px #000; border-bottom:

solid 1px #000;}

.centerlinesright2 {float: left; margin-left: 0px; margin-top: 160px; margin-bottom: 0px; margin-right:

0px; width: 20px; height: 200px; border-top: solid 1px #000; border-right: solid 0px #000;

border-bottom: solid 1px #000;}

.childrenlinesleft { margin-left: 0px; margin-top: 0em; margin-bottom: 0px; margin-right: 0px; width:

20px; height: 2.2em; border-top: solid 1px #000; border-left: solid 1px #000; border-bottom: solid 0px

#000;}

.childrenlinesleftlast { margin-left: 0px; margin-top: 0; margin-bottom: 0px; margin-right: 0px; width:

20px; height: 2.2em; border-top: solid 1px #000; border-left: solid 1px #000; border-bottom: solid 1px

#000;}

.verticalspace {height: 30px;}

</style>

</head>
<body>

<div id="parentscolumn">
<div class="box , boxtopmargin1">
<a href="#" title="Family aaa" >Family aaa Family aaa</a>
</div>
<div class="box , boxtopmargin1">
<a href="#" title="Family Name bbb" >Family bbb</a>
</div>
</div>

<div id="centercolumn">
<div class="box">
<a href="#" title="Family ccc" >Family ccc</a>
</div>
<div class="verticallines"></div>
<div class="box">
<a href="#" title="Family Name Two" >Family ddd</a>
</div>
<div class="verticallines"></div>
<div class="box">
<a href="#" title="Family Name Two" >Family eee</a>
</div>
</div>

<div class="box2"><a href="#" title="Family Name Two" >Family fff</a></div>
<div class="box2"><a href="#" title="Family Name Two" >Family ggg</a></div>
<div class="box2"><a href="#" title="Family Name Two" >Family ggg</a></div>
<div class="box2"><a href="#" title="Family Name Two" >Family iii</a></div>
<div class="box2"><a href="#" title="Family Name Two" >Family jjj</a></div>
<div class="box2"><a href="#" title="Family Name Two" >Family kkk</a></div>

</div>

</body>
</html>

IE6 problem with Multiple Floats - family tree pure CSS

terrybarth

terrybarth

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week