title: How to make list items of one UL with fixed height be displayed as columns?
body: <p>For example, i have such a list:</p>
  
  <pre><code>1
  2
  3
  4
  5
  6
  7
  8
  </code></pre>
  
  <p>and i want it to look like</p>
  
  <pre><code>1 5
  2 6
  3 7 
  4 8
  </code></pre>
  
  <p>So, how to make it work without any javascript? </p>
  
  <p>I have such a code:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;1&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li&gt;3&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt;
      &lt;li&gt;5&lt;/li&gt;
      &lt;li&gt;6&lt;/li&gt;
      &lt;li&gt;7&lt;/li&gt;
      &lt;li&gt;8&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And</p>
  
  <pre><code>ul{
      height:200px;
  }
  </code></pre>
  
  <p>And i also need the code to be supported by IE8 and IE9  </p>
  
  <p><strong>Update:</strong></p>
  
  <p>It seems to me that i got it. It's looking a little bit weird but anyway.</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
    &lt;li&gt;6&lt;/li&gt;
    &lt;li&gt;7&lt;/li&gt;
    &lt;li&gt;8&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And CSS</p>
  
  <pre><code>ul{
    border:1px solid;
    position:relative;
    height:100px;
  }
  li{
    height:20px;
  }
  li:nth-child(4)~li{
    left:100px;
    top:-80px;
    position:relative;  
  }
  </code></pre>