title: Floated divs expand on hover, moves second row div to left rather than moving it down
body: <p>So it was hard to get my question in to a single line. Basically, I have a bunch of generated boxes from a php script and they need to be the same height. There is a short description within each box which is half hidden, when you hover the box expands to reveal the rest of the content. </p>
  
  <p>My question is, is it possible to make the full row underneath move down the expanded amount without the div jumping to the left. If you hover over div 1, you'll see div 4 jump to the left and cause a knock on effect which is unappealing, however if you hover over div 3 you'll notice the full second row moves down in a unified fashion. I'm not sure enitrely why this happens for one and not the other. Please see attached fiddle</p>
  
  <pre><code>&lt;div class="hover"&gt;&lt;/div&gt;
  
  .expand{height:100px; width:120px; text-align:center; 
  float:left; vertical-align:middle; border:1px solid black; margin:10px;}
  
  .expand:hover {height:120px;}
  </code></pre>
  
  <p><a href="http://jsfiddle.net/n90ua1cp/" rel="nofollow">http://jsfiddle.net/n90ua1cp/</a></p>