DIV inline-block not aligning horizontally - html

Question

I have five columns which I aligned using display:inline-block It works fine, but there is one problem. When I refresh the page for about 4 or 5 times while the first column is on the top the other 4 columns go to the bottom of it and when I refresh again it gets back to its original place. I couldn't figure out what is causing this and the content inside the columns are coming from database. can someone give me hint?
CSS
.col1
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col2
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col3
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col4
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col5
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col_content_wrap
{
background-color:#fff;
border:1px solid #ddd;
border-radius:5px 5px 5px 5px;
box-shadow:4px 4px 1px #eee;
margin-bottom:10px;
}
.imgwrap
{
height:169px;
position:relative;
width:223px;
}
.price_wrap
{
border-top:1px solid silver;
height:50px;
}
.price
{
float:right;
margin:10px;
}
HTML
<div clas="col1">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
<div clas="col2">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
<div clas="col3">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
<div clas="col4">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
<div clas="col5">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>

Answer 1

You are missing an endquote for each of the <div class="col_content_wrap> elements.
Also, in each of your html blocks, you have 5 <div>'s and only 4 </div>'s