Question: I have these floating DIV boxes in which works perfectly. :)

![float div](https://i.stack.imgur.com/wHsbT.png)

but when the text extends more, I encounter this float problem.

![enter image description here](https://i.stack.imgur.com/ovQ5Q.png)

How do I fill that ugly space thats' ruining my design?

Answer: 
This happens because floated elements fall out of the normal HTML document flow and default to this behaviour when some elements are taller than their siblings.

One way to solve this is to have fixed height elements. If they all have the same height this issue will not occur. This is not always practical, however, especially with dynamic content. 

Another solution is to use JavaScript. Take a look at the [Masonry jQuery plugin](http://masonry.desandro.com/); it can do what you need.
I would use the Vanilla Masonry plugin which won't rely on jQuery; <http://vanilla-masonry.desandro.com/>