title: css: expand div on hover without displacing other divs
body: <p>I have the following code :</p>
  
  <pre><code>&lt;style&gt;
      #items {width:300px;}
      .item {width:100px;border:solid 1px #ccc;float:left;height:20px;overflow:hidden;}
      .item:hover{height:auto}
  &lt;/style&gt;
  
  &lt;div id="items"&gt;
      &lt;div class="item"&gt;text 1&lt;br&gt;text 1&lt;br&gt;text 1&lt;/div&gt;
      &lt;div class="item"&gt;text 2&lt;br&gt;text 2&lt;br&gt;text 2&lt;/div&gt;
      &lt;div class="item"&gt;text 3&lt;br&gt;text 3&lt;br&gt;text 3&lt;/div&gt;
      &lt;div class="item"&gt;text 4&lt;br&gt;text 4&lt;br&gt;text 4&lt;/div&gt;
      &lt;div class="item"&gt;text 5&lt;br&gt;text 5&lt;br&gt;text 5&lt;/div&gt;
      &lt;div class="item"&gt;text 6&lt;br&gt;text 6&lt;br&gt;text 6&lt;/div&gt;
      &lt;div class="item"&gt;text 7&lt;br&gt;text 7&lt;br&gt;text 7&lt;/div&gt;
      &lt;div class="item"&gt;text 8&lt;br&gt;text 8&lt;br&gt;text 8&lt;/div&gt;
      &lt;div class="item"&gt;text 9&lt;br&gt;text 9&lt;br&gt;text 9&lt;/div&gt;
      &lt;div class="item"&gt;text 10&lt;br&gt;text 10&lt;br&gt;text 10&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>see it in action :
  <a href="http://jsfiddle.net/6K7t4/" rel="noreferrer">http://jsfiddle.net/6K7t4/</a></p>
  
  <p>when a div id hovered, it should expand without displacing other divs as shown at :
  <a href="http://shopping.kelkoo.co.uk/ss-shirt.html" rel="noreferrer">http://shopping.kelkoo.co.uk/ss-shirt.html</a></p>
  
  <p>Also, please suggest how to achieve a cross-browser solution.</p>
  
  <p>If it can be done using pure css, I prefer that solution.</p>
  
  <p>If not, can it be done using jquery in an easy way without plugins?</p>