title: CSS - expand div on hover and do not move other divs
body: <p>I need to create product grid:</p>
  
  <ul>
  <li>With fixed div height; </li>
  <li>Expand - to show large texts only on div:hover;</li>
  <li>Do not move other divs.</li>
  <li>CSS</li>
  </ul>
  
  <p>Working Sample:
  <b><a href="http://rozetka.com.ua/mobile-phones/c80003/filter/preset=smartfon/" rel="nofollow">http://rozetka.com.ua/mobile-phones/c80003/filter/preset=smartfon/</a></b></p>
  
  <p>My code:
  <b><a href="http://jsfiddle.net/JfNsu/6/" rel="nofollow">http://jsfiddle.net/JfNsu/6/</a></b></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.product-grid {}
  .item_box_in2 {
      display: inline-block;
      border: 1px #DDD solid;
      width: 30%;
      float: left;
      margin-left: 5px;
      margin-bottom: 5px;
      background-color: #f1f1f1;
      height: 15em;
      overflow:hidden;}
  .item_box_in2:hover {
      overflow: visible;
      height: auto;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="product-grid"&gt;
  &lt;!--Product 1--&gt;
  &lt;div class="item_box_in2"&gt;    
  &lt;h1&gt;Title 1&lt;/h1&gt;
      &lt;p&gt;Text 1&lt;/p&gt;
      &lt;p&gt;Price 1&lt;/p&gt;
      &lt;p&gt;Desk 111111111 111111111 11111111&lt;/p&gt;
  &lt;/div&gt;
  &lt;!--Product 2--&gt;
  &lt;div class="item_box_in2"&gt;   
  &lt;h1&gt;Title 2&lt;/h1&gt;
      &lt;p&gt;Text 2&lt;/p&gt;
      &lt;p&gt;Price 2&lt;/p&gt;
      &lt;p&gt;Desk 222222222 2222222222 22222222222 222222222 222222222222 22222222222222 222222222222 222222222222222 22222222222222 22222222222222 222 222222222222 22222222222 2222222222222222 2222222222222222222222 222222 22222222222 22222222222&lt;/p&gt;
  &lt;/div&gt;
  &lt;!--Product 3--&gt;
  &lt;div class="item_box_in2"&gt;   
  &lt;h1&gt;Title 3&lt;/h1&gt;
      &lt;p&gt;Text 3&lt;/p&gt;
      &lt;p&gt;Price 3&lt;/p&gt;
      &lt;p&gt;Desk 333333333 333333333 33333333333333333 333333333333333 333333333333333 3333333333333333 33333333333333333333 33333&lt;/p&gt;
  &lt;/div&gt;
  &lt;!--Product 1--&gt;
  &lt;div class="item_box_in2"&gt;   
  &lt;h1&gt;Title 1&lt;/h1&gt;
      &lt;p&gt;Text 1&lt;/p&gt;
      &lt;p&gt;Price 1&lt;/p&gt;
      &lt;p&gt;Desk 111111111 111111111 11111111&lt;/p&gt;
  &lt;/div&gt;
  &lt;!--Product 2--&gt;
  &lt;div class="item_box_in2"&gt;   
  &lt;h1&gt;Title 2&lt;/h1&gt;
      &lt;p&gt;Text 2&lt;/p&gt;
      &lt;p&gt;Price 2&lt;/p&gt;
      &lt;p&gt;Desk 222222222 2222222222 22222222222 222222222 222222222222 22222222222222 222222222222 222222222222222 22222222222222 22222222222222 222 222222222222 22222222222 2222222222222222 2222222222222222222222 222222 22222222222 22222222222&lt;/p&gt;
  &lt;/div&gt;
  &lt;!--Product 3--&gt;
  &lt;div class="item_box_in2"&gt;
  &lt;h1&gt;Title 3&lt;/h1&gt;
      &lt;p&gt;Text 3&lt;/p&gt;
      &lt;p&gt;Price 3&lt;/p&gt;
      &lt;p&gt;Desk 333333333 333333333 33333333333333333 333333333333333 333333333333333 3333333333333333 33333333333333333333 33333&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>