title: Equal height elements with CSS
body: <p>I read about several different solutions to simulate equal-height columns or elements, but none of them really captured my attention because they were using hacks, incredibly complex HTML layouts or not widely supported attributes.</p>
  
  <p>Here's the example <a href="http://jsfiddle.net/weppos/satgw/">Fiddle</a>.</p>
  
  <p>My goal would be to make sure all the elements have the same height or, at least, the maximum height of the siblings in the row.</p>
  
  <p>A row is composed by 3 elements (in this case, no row wrapper exists but I may consider to add such container element).</p>
  
  <p>Is there a solution that:</p>
  
  <ol>
  <li>doesn't require JS</li>
  <li><a href="http://www.456bereastreet.com/lab/equal_height/">doesn't use <code>display: table</code></a></li>
  <li>doesn't use wide padding/margin with negative values</li>
  <li><a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks">doesn't require exponential uses of divs and float</a></li>
  </ol>