gird layout help

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