How to make float not overlap other text
I'm floating the green box to the right and I want it to go to the right but find space for itself where it doesn't overlap other things. I thought that's what float is supposed to do? Since there is not enough room to the right of the text, it should go below the text. I want the float to decide based on the size of the red div whether it can fit or not and I want it to never overlap anything.
<div style='width:188px;height:333px;border:1px solid blue'>
<div style='width:99px;height:99px;display:inline-block;background-color:green;overflow:hidden;float:right;'>green box</div>
<div style='white-space:nowrap;border:1px solid red'>asdf asdf asdf asdf</div>