How to float DIVs with different heights to stack up without white space – CSS tricks

This is a common requirement with the modern design trends to be able to stack up divs in a nice masonry fashion even if they have different heights. See the image below. Here we will show how to do it easily with just CSS. The divs with dynamic content have different heights and they create white space below them and take the height of the highest div in the row. We will remove this space and stack them as shown in the image. See the below HTML and the CSS.

blogimage

 

 

 

 

 

 

 

 

 

HTML

<!-- HTML sample -->
<div class=”outer-block”>
	<div class="items">Some content</div>
	<div class="items">Some content with different length</div>
	<div class="items">Some content with different length 1</div>
</div>

CSS

/* CSS */
.outer-block { 
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}
.items { 
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

 

With this css we can specify how many <div> or <li> is allowed in a row and stack up properly. Even long paragraph of text can also be divided in an eye catchy way.
Hope this will help someone in need.