Blogs of html-tricks

We are a web development and outsourcing agency based in Kochi, India.

Discover the Ultimate CSS Trick: How to Stack Floating Divs with Varying Heights Seamlessly and Eliminate White Space?

This is a common requirement with 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. HTML <div class="floating-div-wrap"> <div class="floating-container"> <div class=...

2hats Logic HelpBot