Div interfering with links

[Ebola]

I don't really have a problem, but when I was working on a project the other day I had split a large list of child directories into two divs, one floating left, one floating right. This worked fine, but because a form I had below these two lists was bleeding into the bottom of the right div I placed it in a div as well, and floated it left.

Now at first this seemed to work fine, it looked as I wanted it to but when I clicked on one of the links listed in the two divs I wouldn't go anywhere and the placement would break. The right div would go completely beneath the left div, though off to the right, as though I had made it too wide and it was forced down. Once the placement broke I could click the links and they would work fine.

Once I removed the float:left attribute of the div surrounding the form everything was fine (Except some of the text describing the form bleeding into the right category of child divs).

Does anyone know what caused this or how it can be corrected? I've since re-structured the page so this isn't a problem but I would really like to know why this happened.

[Frank62]

Ebola,

Did you clear the floats? It sounds like you didn't. A float means, among other things, that the next element is to move up and next to the element with the float.

Clearing the float can be done in two ways: an empty div with only this declaration: clear:both (clear:left or clear:right is also possible), or give the first element after the floated ones such a property.

[WebJoel]

Would need to see your code, but if you are floating something left and floating another something right, I assume that these two are in a 'container' of some sort, yes? 'Floats' are 'lifted up out of the document flow' and as such, are prone to this so adding "overflow:hidden;" to the 'container' allows the floats to be enwrapped properly. This applies 'pressure' against the inner-walls of the container, allowing the container to properly contain the floated content and expand correctly (and thus, not be over-written by the next block in content in the document flow).

[Ebola]

This is the code I have, just the div stuff is really relevant.
echo"<div style=\"float:left; width: 49%; border-right: thin dotted #000000; vertical-align: top;\">";

while($i < $ColLinksHalf){
echo $ChildArray[$i] . "<br />";
$i += 1;
}
echo"</div><div style=\"float:right; width: 50%\">";

while($i < $ChildCount){
echo $ChildArray[$i] . "<br />";
$i += 1;
}
echo"</div>
<div style=\"clear: both;\">
//form here
</div>";


I added the <div style=\"clear: both;\"></div> around the form I had and that has helped. I still have the problem with the links, though now the second column is no longer pushed below the first, they are merely pushed together.

After adding "overflow:hidden;" to both divs, and found that when clicking a link that will fit in one line after the columns get smaller will do nothing, like it was before adding "overflow:hidden;". However, links that are on two lines either before or after the columns get smaller will work like a regular link. These now-working links will still show the columns get smaller if your internet speed isn't lightning quick. Weird behavior.

I've added screenshots in case I'm not describing this correctly.

One last thing, I'd like the first columns text to go to the top, like valign=top does, but using the vertical-align: top doesn't affect it at all.

Thanks for your help so far.