Удаление emty Space из Div

Question

Я пытаюсь избавиться от пространства в своих divs, которые выглядят так: , и если я попытаюсь нажать изображение, оно будет работать, но высота контейнеров не изменится, так или иначе, чтобы исправить это, я хочу сделать они выравниваются в одном положении?

Html

<div class="addtocart-holder shadow"> 
    <div class="cart-img"> <img src="img/product4.jpg"> </div> 
    <div class="cart-image-details"> 
    <div class="cart-item-name"> <h3> Feather Dress With Embellished Lace Top</h3> </div> 
    <div class="cart-item-details"> <table> 
     <tr> 
     <td>Price Before:</td> 
     <td class="old">$200</td> 
     </tr> 
     <tr> 
     <td>Price: </td> 
     <td>$100</td> 
     </tr> 
     <tr> 
     <td>You Saved:</td> 
     <td class="saved">$100</td> 
     </tr> 
     <tr> 
     <td>Shippment :</td> 
     <td class="free">Free</td> 
     </tr> 
    </table> </div> 
    <div class="cart-item-add"> <table> 
     <tr> 
     <td>Quantity:</td> 
     <td class="old"><input type="text" class="form-control" value="1" /></td> 
     </tr> 
     <tr> 
     <td></td> 
     <td><div class="buy-ico"> Add To Cart</div></td> 
     </tr> 
    </table> </div> 
    </div> 

CSS

.addtocart-holder{ 
     min-width: 700px; 
     margin-top:100px; 
     padding:5px; 
     backround: #fff; 

    } 
    .cart-img, .cart-image-details{ 
     border:1px solid #f00; 
     display: inline-block; 
     position: relative; 
    } 
    .cart-img{ 
     height:190px; 
     width:26%; 
    } 
    .cart-img img{ 
     width:100%; 
     height:100%; 

    } 
    .cart-image-details{ 
     width:73%; 
    } 
    .cart-item-name{ 
     width:100%; 
     text-align: center; 
    } 
    h3{ 
     text-decoration: none; 
     text-align:center; 
     margin: 5px 0; 
     color:#888; 
     font: italic normal 17px georgia; 
     font-style: italic; 
    } 
    .cart-item-details, .cart-item-add{ 
     width:49%; 
     border:1px solid #000; 
     display: inline-block; 
    } 
    table{ 
     border:1px solid #fff; 
     width: 100%; 
     color: #888; 
    } 
    td{ 
     padding:4px; 
     font-size:16px; 
     font-weight:500; 
    } 
    .shadow{ 
     height: auto !important; 
     -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.31); 
     -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.31); 
     box-shadow:   0px 0px 5px rgba(50, 50, 50, 0.31); 
    } 

Answer 1

Вы должны установить vertical-align свойство .cart-image-details наверх.

.cart-image-details { 
    vertical-align: top; 
} 

Fiddle: http://jsfiddle.net/u9mtyjoe/

Начальное значение vertical-align является baseline, поэтому изменение в top поможет выровнять дивы правильно.

Ссылка: MDN