Как сделать так, чтобы элементы списка одного UL с фиксированной высотой отображались в виде столбцов?

Например, у меня есть такой список:

1
2
3
4
5
6
7
8

и я хочу, чтобы это выглядело как

1 5
2 6
3 7 
4 8

Итак, как заставить его работать без javascript?

У меня есть такой код:

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
</ul>

И

ul{
 height:200px;
}

И мне также нужно, чтобы код поддерживался IE8 и IE9.

Обновлять:

Мне кажется, что я понял. Выглядит немного странно, но тем не менее.

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
</ul>

И CSS

ul{
 border:1px solid;
 position:relative;
 height:100px;
}
li{
 height:20px;
}
li:nth-child(4)~li{
 left:100px;
 top:-80px;
 position:relative; 
}

Решение проблемы

вам нужны относительные атрибуты столбца CSS3, такие как количество столбцов и т. д. Я делаю пример на jsFiddle. Я мало что знаю об этом, поэтому я добиваюсь результата, точно вычисляя высоту, но я думаю, что вы можете получить ее по-своему.

И ссылка может быть полезной.

HTML-код:

<div class="newspaper">
 <div class="unit">1</div>
 <div class="unit">2</div>
 <div class="unit">3</div>
 <div class="unit">4</div>
 <div class="unit">5</div>
 <div class="unit">6</div>
</div>

CSS-код:

.newspaper {
 -moz-column-count:3;
 /* Firefox */
 -webkit-column-count:3;
 /* Safari and Chrome */
 column-count:3;
 height: 300px;
}
.unit {
 height:50px;
 width:100%;
 border:1px solid gray;
}

Примечание. Internet Explorer 9 и более ранние версии не поддерживают свойство column-count.