How To Put Multisize Boxes In A Container Without Blank Space?

Does anyone know how to put multiple div (box) with multiple size in the big container to let blank space only in the bottom of the container ? Here is a representation of what i w

Solution 1:

It sounds like you're trying to fit multiple containers of various sizes into a single container with a known size to get the best fit you can. JQuery masonry is perfect for that, if you're willing to use jQuery, though there is no guarantee that it would leave all of the blank space at the bottom.

Documentation here: http://masonry.desandro.com/

Demo here: http://masonry.desandro.com/demos/basic-single-column.html

And you can set gutterWidth to 0 to take out all space between columns. http://masonry.desandro.com/docs/options.html

Solution 2:

Without more information (your current code, a diagram, a sample website), I'm not really sure what you're asking here. If you're just looking to add bottom spacing to a container, try using CSS with padding-bottom?

Solution 3:

Do you mean somethink like http://jsfiddle.net/ZFdHz/ ??