Effect of overflow:auto on floated divs

[roro]

Short version: Why does \[code\]overflow:auto\[/code\] cause a \[code\]div\[/code\] to the right of a left floated \[code\]div\[/code\] not to wrap its text around the left floated \[code\]div\[/code\]? (Bonus: Is this an acceptable way to accomplish a column effect?)I have two \[code\]div\[/code\]s that I wish to be next to each other, and displayed as columns. The \[code\]div\[/code\] on the left has a specific width and height. And the \[code\]div\[/code\] on the left is shorter than the \[code\]div\[/code\] on the right. However, I do not want the text in the right \[code\]div\[/code\] to wrap under the left div.Here was my first attempt...\[code\]<div> <div style="border:1px solid grey; width:100px; height:100px; float:left;"> Div on the left. </div> <div> Imagine lots and lots of text here... </div> <div style="clear:both"/></div>\[/code\]...I knew the text in the right \[code\]div\[/code\] would wrap under the left \[code\]div\[/code\]. And it did.Then I remembered a page I had created that had a column effect. I had copied and pasted it from I know not where. All it did was assign \[code\]overflow:auto\[/code\] to the \[code\]div\[/code\] on the right. It looks like this...\[code\]<div> <div style="border:1px solid grey; width:100px; height:100px; float:left;"> Div on the left. </div> <div style="overflow:auto"> Imagine lots and lots of text here... </div> <div style="clear:both"/></div>\[/code\]Voila, the right \[code\]div\[/code\]s text no longer wrapped!So, I read everything I could find on \[code\]overflow:auto\[/code\] and found no mention of why I should see this behaviour. Can anyone explain it to me?Also, is this an acceptable way to achieve a column effect?