Once I add img file, box goes down by picture pushing down

Question

When I organize the same sizes of boxes by inline-block, it can be responsive. However, when I organize different sizes of boxes, it cannot be responsive and even push down boxes once I add image in div class. Could u help me?

here`CSS code is

.box {
    width:30%;
    height:160px;
    border: 1px solid #000000;
    display:inline-block;
}

.clear {
    clear:both;
}

.colunm1 {
    width:340px;
    height:386px;
    border: 1px solid #000000;
    display:inline-block;

}  /*when sizes r different, place display:inline-block both*/

.colunm2 {
    width:340px;
    height:232px;
    border: 1px solid #000000;
    display:inline-block;
    position: relative;
    bottom:154px;
} 

.colunm3 {
    width:340px;
    height:600px;
    border: 1px solid #000000;
    float:right;
}

.colunm4 {
    width:340px;
    height:205px;
    border: 1px solid #000000;
}

.colunm4 {
    width:340px;
    height:218px;
    border: 1px solid #000000;
    display:inline-block;
    position:relative;
    bottom:153px;
}
/*colunm 4 and 5 have problem*/
.colunm5 {
    width:340px;
    height:363px;
    border: 1px solid #000000;
    display:inline-block;
    position: relative;
    bottom:155px;
}

HTML code is

<div class="box">
</div>

<div class="box">
</div>


<div class="colunm1">
<img src="">    
</div>

<div class="colunm2">
    <img src="">
</div>

<div class="colunm3">
    <img src="">
</div>

<div class="colunm4">
    <img src="">
</div>

<div class="colunm5">
    <img src="">
</div>

Answer 1

You need to give vertical-align: top to:

.box {
    width: 30%;
    height: 160px;
    border: 1px solid #000000;
    display: inline-block;
    vertical-align: top;
}