title: UL+CSS for grid layout
body: <p>I have a server-generated html like:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;!-- few nested elements that form a block --&gt;&lt;/li&gt;
      &lt;li&gt;&lt;!-- few nested elements that form anaother block --&gt;&lt;/li&gt;
      &lt;li&gt;&lt;!-- etc, X times --&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>All blocks have known width 200px and unknown height. I want <code>&lt;li&gt;</code> to be arranged in table-like fashion like this:</p>
  
  <p><img src="https://dl.dropbox.com/u/1729997/li-ok.png" alt="alt text"></p>
  
  <p>What I have for now is following css:</p>
  
  <pre><code>li {
      display: block;
      width: 200px;
      float: left;
      margin: 10px;
  }
  </code></pre>
  
  <p>All is fine except that columns don't get equal height. And in example above block #4 “snatch” at #1 and the result isn't what I'm trying to achieve:</p>
  
  <p><img src="https://dl.dropbox.com/u/1729997/li-bad.png" alt="alt text"></p>
  
  <p>Is there any pure-CSS cross-browser way that will allow grid layout I want and will not enforce markup change?</p>