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.

HTML Code:
<html>
<body>
	<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>
			<div style='white-space:nowrap;border:1px solid red'>asdf asdf asdf asdf</div>
		</div>
	</div>
</body>
</html>