Divs Float Up

Is there a way to cause divs to float up and fill empty space? Right now I have listings in div wrappers, floated right, with margins as buffers between then. A problem arises when the listings are different heights. There is a gap under long ones, because everything can't float right into place. What I would like is for all listings underneath to come up and fill the space..

Here's an image of the issue.

http://s32.postimg.org/pxo4oziph/listing_issue.jpg

Thanks for any help

 

Okay. I've started solving this problem, but I ran into another issue.

My solution was to create a masonry div with three css columns. All the lower divs floated up, but there's a lip in the first row of items. The first one is higher, the two next to it are a bit lower.

html is something like below:

<div class="masonry">
    <div class="listing-item"></div>
    <div class="listing-item"></div>
    <div class="listing-item"></div>
    <div class="listing-item"></div>
</div>

HTML:

CSS:

.masonry{

column-count: 4;

}

.listing-item{
           
    display: inline-block;
    margin: 0 0 1em;
    margin-right:0.4em;
    min-height:550px;
    padding:0.4em;
    border:1px solid lightgrey;
    width:240px;

}

Code (markup):

Thanks.

 

Looks like the way Google arrange their image search result e.g.
https://www.google.com/search?q=people&tbm=isch
The difference is yours has fixed widths...

So like Google, maybe you have to use javascript to adjust divs to fill empty spaces.
Problem is when users resize their screen; the same javascript must be called again to readjust the divs.

Hmm. I think it's more convenient to just limit that text within your divs with... ellipsis?
THis way all your divs will have same height.