Delete gap between stacked upper and lower boxes - html

Question

I created a fiddle here : http://jsfiddle.net/celiostat/zgUgn/
this is for a dynamic webpage. depending on the user, their might be 4 (as in the example) or 13 collections (on square = one collection). Height of image and collection title can vary. Consequently boxe height varies, and on the second row, I get a gap between collection above and collection below whereas I would like to keep that space between the boxes even; say 25px.
Thanks for your help !
HTML:
<div class="collection_bookmars_container">
<img class="collection_random_image" src="http://img.foodnetwork.com/FOOD/2012/05/04/FNM-060112_NTD-Hot-Dog-Sandwich_s4x3_lg.jpg">
<div class="collection_bookmark_title_container">
<span class="collection_bookmark_title">Thai favorites</span>
</div>
<div class="modify_collection_container">
<span class="number_of_articles">1</span>
<span class="article_text_only">articles</span>
<img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
</div>
</div>
<div class="collection_bookmars_container">
<img class="collection_random_image" src="http://img.foodnetwork.com/FOOD/2013/07/19/FNM_090113-Name-This-Dish-Stacked-Salad-Recipe_s4x3_lg.jpg">
<div class="collection_bookmark_title_container">
<span class="collection_bookmark_title">Best France food stuff</span>
</div>
<div class="modify_collection_container">
<span class="number_of_articles">1</span>
<span class="article_text_only">articles</span>
<img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
</div>
</div>
<div class="collection_bookmars_container">
<img class="collection_random_image" src="http://img.foodnetwork.com/FOOD/2012/05/04/FNM-060112_NTD-Hot-Dog-Sandwich_s4x3_lg.jpg">
<div class="collection_bookmark_title_container">
<span class="collection_bookmark_title">Snacks</span>
</div>
<div class="modify_collection_container">
<span class="number_of_articles">1</span>
<span class="article_text_only">articles</span>
<img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
</div>
</div>
<div class="collection_bookmars_container">
<img class="collection_random_image" src="http://www.secondhomemalaysia.co.uk/uploads/Food3.jpg">
<div class="collection_bookmark_title_container">
<span class="collection_bookmark_title">Soups and veloutes</span>
</div>
<div class="modify_collection_container">
<span class="number_of_articles">1</span>
<span class="article_text_only">articles</span>
<img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
</div>
</div>
CSS:
body
{
background-color: #ECF0F1;
}
.container
{
max-width: 550px;
width: 100%;
margin: 0px auto;
position: relative;
}
.table_presentation_two_column
{
height: auto;
display: table;
width: 100%;
margin: 0 auto;
}
.collection_bookmars_container
{
height: auto;
background-color: white;
display: inline-block;
vertical-align: top;
width: 46%;
box-sizing: border-box;
margin: 20px 2% 0% 2%;
}
.collection_random_image
{
margin-bottom: 10px;
width: 100%;
}
.collection_bookmark_title_container
{
margin: 30px 4% 0px 4%;
}
.collection_bookmark_title
{
font-family: "Roboto Slab","serif";
font-size: 30px;
}
.modify_collection_container
{
margin-top: 10px;
margin: 20px 4% 0px 4%;
padding-top: 15px;
border-top: 3px solid #EBEBEB;
width: 92%;
}
.number_of_articles
{
font-size: 16px
font-family: "Montserrat";
padding-bottom: 4px;
color: #AFAFAF;
font-weight: bold;
}
.article_text_only
{
font-size: 16px;
font-family: "Montserrat";
padding-bottom: 4px;
color: #AFAFAF;
font-weight: bold;
}
.icon_modify_collection
{
float: right;
position: relative;
overflow: hidden;
width: 12%;
max-width: 250px;
padding-bottom: 10px;
margin-top: -5;
}

Answer 1

You will need something like Masonry (http://masonry.desandro.com/) to do what you want, there is no other way doing it nicely because of the height difference. The wrapper is what is wrecking it for you.
Perhaps another idea is to create the wrappers for each column instead of each row.