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 diagram using only HTML and CSS. I was doing great until I got to the very last set of children boxes. 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. The approach I've used is a series of eight divs all floated left. Each div (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 which doesn't float like the others--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 set of divs 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 a link to the page. Try it in a couple of different browsers. http://www.terrybarthdesign.com/famtree/familytree.html Thank you! Terry
OK, I finally solved this problem. Turns out one of the divs, specified height but not width. Once I added width, the float worked as I had intended. Can't say I understand why. . . I have a few other format issue to resolve, so I'll post the finished page once I've done that.
Floats are weird that way. I learned (the hard way) that when you don't set a width on a float, then normal browsers will "shrink-wrap" it. So, the amount of content sets the width. IE6 I think treats the float like a div, where it decides the default width is 100% of its container. Hehe, which would screw everything up.