Floating Div Extra Space Fillup

I have these floating DIV boxes in which works perfectly. :) but when the text extends more, I encounter this float problem. How do I fill that ugly space thats' ruining my desig

Solution 1:

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; it can do what you need.

Solution 2:

I would use the Vanilla Masonry plugin which won't rely on jQuery; http://vanilla-masonry.desandro.com/

Solution 3:

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.