Grid Column in div

Question

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?

image:

my css

   .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; 
} 

my html

  <div class="product-wrapper">
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">Simple Product Name</span>
                        </div>
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">AveryVeryverylongPRoductNamewithoutspace</span>
                        </div>
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">AveryVeryverylongPRoductNamewithoutspace</span>
                        </div>
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">Products</span>
                        </div>
                       <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">A productNamefor Sample</span>
                        </div>
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">Another Product</span>
                        </div>
                    </div>

Answer 1

add this to .product-holder

.product-holder { vertical-align: middle; }

Answer 2

try this .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 {

                 display: block;
              float:left;
                  font-weight: bold;
                   margin: 0 10px;
                   overflow: hidden;
                  width: 200px;
                  word-wrap: break-word;
                    }