Posts adjust Size and location. CSS - html

Question

I am having an issue making an HTML page where I put posts of images of different sizes. Image width needs to be the same and height will be different. When the top post image is a smaller height I want the lower post image to move up to cover the blank space. You can better understand by looking at the below images:
This is what I made
(Check links of images please)
http://i.stack.imgur.com/An2ca.png
This is what I want
http://i.stack.imgur.com/dQzFH.png
I hope you can understand now.
My CSS code is below:
.posts{
width:80%;
max-width:951px;
min-height:990px;
border:0px solid black;
float:right;
margin-left:10px;
}
.post{
width:300px;
min-height:100px;
float:left;
margin-left:10px;
margin-top:10px;
border:0px solid green;
vertical-align:text-top !important;
}
.post img{
width:100%;
max-width:290px;
height:auto;
transition:all 1s ease;
opacity:1.0;
}
.post img:hover{
opacity:0.7;
}

Answer 1

I recommend that you look first at the basics of what Flexbox does for you by going here: Flexbox. That aside you can try to play around by setting your image holding classes to use display: flex. Fair warning, if you do care about cross browser functionality, make sure flex is supported for the audience you're trying to capture. You can look here: can I use.
There are JS Libraries as suggested by the community (see your comments) that will leverage such functionality for you. I also will say that while these libraries may be robust, they will work as long as they achieve the functionality you desire, so take time to explore Masonry and Isotope to see if these provide a solution for you.
I also recently found a good read regarding Flex Box:
A Visual Guide to CSS3 Flexbox Properties box that you may find interesting and hopefully useful as well :)
Otherwise let us know, we will try to continue to help you if you need more assistance.