Currently, I have five columns that are aligned using the display:inline-block. Everything seems to be working fine, but there's a peculiar issue that arises when I refresh the page multiple times. Occasionally, while the first column remains at the top, the remaining four columns shift below it. However, upon another refresh, they return to their original positions. I'm unable to pinpoint the root cause of this behavior, especially since the content within these columns is dynamically fetched from a database. Could someone provide me with a hint or potential solution for this perplexing issue?
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>