title: How to obtain a grid of equal height list items?
body: <p>I am trying to do a grid of products using list items and <code>inline-block</code>. The problem is: the content of the blocks have variable heights and the <code>inline-block</code> doesn't keep the heights equal.</p>
  
  <p>The code:</p>
  
  <pre><code>#blocks ul{
    list-style-type:none;
    margin:0px;
    padding:0px;
  }
  
  #blocks li {
    display:inline-block;
    vertical-align:top;
    width:280px;
    background-color:#ff9933;
    padding:13px;
    margin: 0px 0px 20px 19px;
  }
  
  &lt;div id="blocks"&gt;
      &lt;ul&gt;
         &lt;li&gt;...&lt;/li&gt;
         &lt;li&gt;...&lt;/li&gt;
         &lt;li&gt;...&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://i.imgur.com/CwG0j.jpg">Here's an image to illustrate the issue.</a> </p>
  
  <p>I need the blocks to keep the same height of the larger blocks, independently of its content. Is it possible to make someting like <a href="http://i.imgur.com/7HOM7.jpg">this</a>?                           </p>
  
  <p>And finally: <strong>Sorry, english is not my mother language :)</strong></p>