html - DIV inline-block not aligning horizontally -


i have 5 columns aligned using display:inline-block works fine, there 1 problem. when refresh page 4 or 5 times while first column on top other 4 columns go bottom of , when refresh again gets original place. couldn't figure out causing , content inside columns coming database. can 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> 

you missing endquote each of <div class="col_content_wrap> elements.

also, in each of html blocks, have 5 <div>'s , 4 </div>'s


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -