title: Grid Column in div
body: <p>i have created a grid in my site and it look like this. i Dont know why but when characters get too long the positions of the div destroys. Can anyone help me fix this and explain why?</p>
  
  <p>image:</p>
  
  <p><img src="https://i.stack.imgur.com/ihohY.png" alt="enter image description here"></p>
  
  <p>my css</p>
  
  <pre><code>   .product-wrapper{
      margin: 0 auto; 
      display: table;
      text-align: center; 
  }
  .product-holder{   
      display: inline-block; 
      width:220px;
      height: 150px;
      border:1px solid #666666;
      margin-right: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
      -moz-box-shadow: 0 0 0 5px #666666;
      -webkit-box-shadow: 0 0 0 5px #666666;
      box-shadow: 0 0 5px #666666;  
  }
  
  .product-image{
      display: block;
      width: auto;
      height: 90px; 
      margin:10px; 
      border:1px solid #666666;
  }
  .product-caption{
      width: auto; 
      display: block;
      font-weight: bold;
      margin:0 10px; 
      word-wrap:break-word; 
  } 
  </code></pre>
  
  <p>my html</p>
  
  <pre><code>  &lt;div class="product-wrapper"&gt;
                          &lt;div class="product-holder"&gt; 
                              &lt;span class="product-image"&gt;&lt;/span&gt;
                              &lt;span class="product-caption"&gt;Simple Product Name&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class="product-holder"&gt; 
                              &lt;span class="product-image"&gt;&lt;/span&gt;
                              &lt;span class="product-caption"&gt;AveryVeryverylongPRoductNamewithoutspace&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class="product-holder"&gt; 
                              &lt;span class="product-image"&gt;&lt;/span&gt;
                              &lt;span class="product-caption"&gt;AveryVeryverylongPRoductNamewithoutspace&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class="product-holder"&gt; 
                              &lt;span class="product-image"&gt;&lt;/span&gt;
                              &lt;span class="product-caption"&gt;Products&lt;/span&gt;
                          &lt;/div&gt;
                         &lt;div class="product-holder"&gt; 
                              &lt;span class="product-image"&gt;&lt;/span&gt;
                              &lt;span class="product-caption"&gt;A productNamefor Sample&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class="product-holder"&gt; 
                              &lt;span class="product-image"&gt;&lt;/span&gt;
                              &lt;span class="product-caption"&gt;Another Product&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>