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: 
I would use the Vanilla Masonry plugin which won't rely on jQuery; <http://vanilla-masonry.desandro.com/>
A non-JS solution for this is to use `display: inline-block; vertical-align: top;` instead of `float: left` on those boxes. That will make them all sit side by side and line up nicely, although there will be small gaps below any boxes that have a taller one beside them. `inline-block` will at least stop the float snagging you are seeing.