Stack items vertically so there is no white space

I am working on a layout which has three columns per row in a div container, each column has pictures in it however each picture is also a different size as it might be positioned vertically or horizontally so basically I have columns like this 40%, 30% and 40% which gives me the total 100% and that is not a problem it renders properly the images are proportioned accordingly, my question is on the next row where the pictures differ in size and I want to be able to push the pictures up so they are stack very close to each other, to give an example here is a picture I have made the first one represents what I have and the second one what I want to achieve

is it possible to do it with CSS or should I change the way I am creating the divs to contain all items from a column in one container and set the width to it?

Yes, yo need to create separate columns to do this. So, make each column a floated div, and that way things will stack nicely.

Thanks, I was wondering how to, since I am getting all posts in an array, so I guess I just have to get the array index in three different ways that way the posts are ordered by date from left to right

That might be a question for the PHP forum if you are having trouble. But another option might be to have the content in colored boxes that all have the same height. The page might look neater that way, too. I find columns like you are proposing pretty hard to read.

As for the PHP I have no problems I was just trying to see if there was a way in CSS to do it so I did not have to modify the current code, and for the columns I can’t really do anything as my client wants it that way and is mostly pictures so no much problem for the reading.

I don’t think so with CSS, but there may be more options with JavaScript, although that can start to get messy.