Hello I would like to make a grid layout sort of like the one of pinterest.
Here is how my layout looks with image placeholder. i want the each box of the grid to be 220x330. each box will have a picture on top, then below it wil be some buttons.

HTML Code:
<div class="table_1"  style="display:inline;">
    
    <img src="http://placehold.it/220x330"/>
   
   
</div>
<div class="table_2"  style="display:inline;">
    <img src="http://placehold.it/220x330" />

</div>
<div class="table_3"  style="display:inline;">
    <img src="http://placehold.it/220x330"/>
   
</div>
<div class="table_4">
    <img src="http://placehold.it/220x330"/>
  
</div>
this is the code for the grid which looks like this:
http://imgur.com/6l7JK





------------------------------------
However, once i try to add buttons to the bottom of each image. the boxes move below.

code:
HTML Code:
<div class="table_1"  style="display:inline;">
    
    <img src="http://placehold.it/100x200"/><br>
    <button>sadff</button><button>sadf</button>
   
</div>
<div class="table_2"  style="display:inline;">
    <img src="http://placehold.it/100x200" />
    <br><button>sadff</button><button>sadf</button>
</div>
<div class="table_3"  style="display:inline;">
    <img src="http://placehold.it/100x200"/>
    <br> <button>sadff</button><button>sadf</button>
</div>
<div class="table_4">
    <img src="http://placehold.it/100x200"/>
    <br><button>sadff</button><button>sadf</button>
</div>
this is how it looks like
http://imgur.com/kpctl

the css:
Code:
.table_1{
    width:220px;
     overflow:hidden;
    height:330px;
    margin-top: 10px;
    position:static;
        display:inline;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
.table_2{
     position:static;
    width:220px;
    height:330px;
     overflow:hidden;
     display:inline;
     margin-top: 10px;
    margin-bottom: 10px;
    margin:0 auto;
    margin-left: 10px;
    margin-right: 10px;
}
.table_3{
     position:static;
    width:220px;
    height:330px;
     overflow:hidden;
         display:inline;
     margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
.table_4{
     position:static;
    width:220px;
    height:330px;
     overflow:hidden;
       display:inline;
     margin-top: 10px;
         display:inline;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

can anyone please help?
Thanks