word-wrap not working on a floating text

[Brainiac]

Let's say I have this.\[code\]<div><div id="lala">lalalala</div></div>\[/code\]css:\[code\]#lala{ float:left; word-wrap:break-word;}\[/code\]if the text inside \[code\]#lala\[/code\] is big, it will look like this.\[code\]| || || lalalalalalalalalalalalalala | lalalalalala <-- these won't be show.| || |\[/code\]If I remove \[code\]float:left;\[/code\] this will be the result.\[code\]| || || lalalalalalalalalalalalalala || lalalalalala || |\[/code\]How can I have the second result while still using float?