title: DIV inline-block not aligning horizontally
body: <p>I have five columns which I aligned using <code>display:inline-block</code> 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?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    .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;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div clas="col1"&gt;
    &lt;div class="col_content_wrap&gt;
    &lt;div class="imgwrap"&gt;image here
     &lt;div class="price_wrap"&gt;&lt;div class="price"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  &lt;div clas="col2"&gt;
    &lt;div class="col_content_wrap&gt;
    &lt;div class="imgwrap"&gt;image here
     &lt;div class="price_wrap"&gt;&lt;div class="price"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  
   &lt;div clas="col3"&gt;
    &lt;div class="col_content_wrap&gt;
    &lt;div class="imgwrap"&gt;image here
     &lt;div class="price_wrap"&gt;&lt;div class="price"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  
    &lt;div clas="col4"&gt;
    &lt;div class="col_content_wrap&gt;
    &lt;div class="imgwrap"&gt;image here
     &lt;div class="price_wrap"&gt;&lt;div class="price"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  
  
    &lt;div clas="col5"&gt;
    &lt;div class="col_content_wrap&gt;
    &lt;div class="imgwrap"&gt;image here
     &lt;div class="price_wrap"&gt;&lt;div class="price"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>