How do you float elements without a vertical gap?

Question

I am trying to float elements left. Here is my css:

width: 320px;
float: left;
border: 1px solid #ccc;
margin-top: 10px;
margin-right: 10px;
border-radius: 5         


        

Answer 1

What you are attempting to do is known as a "masonry layout" that is despite the element height being variable, it always lines up perfectly with the element above it.

It would take too long to go into how to designing your own, my advice is you do some googling (with the bolded text). Also here are a few links to a few frameworks commonly used:

http://masonry.desandro.com/

http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox