Separate <ul> in two columns: solution more elegant than mine?

Hi,


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


I want my list to display like this:


1  4
2  5
3  6

I’ve been going the “hard-coded” way:


ul {
	position: relative;
	min-height: 150px;
	}
ul li:nth-of-type(1) {
	position: absolute;
	top:0;
	left:0;
	}
ul li:nth-of-type(2) {
	position: absolute;
	top:30px;
	left:0;
	}
ul li:nth-of-type(3) {
	position: absolute;
	top:60px;
	left:0;
	}
ul li:nth-of-type(4) {
	position: absolute;
	top:0;
	left:180px;
	}
ul li:nth-of-type(5) {
	position: absolute;
	top:30px;
	left:180px;
	}
ul li:nth-of-type(6) {
	position: absolute;
	top:60;
	left:180px;
	}

It really doesn’t sound elegant to me. And if one of the list items is a string of text a bit too long, ut quickly looks ugly.

Does anyone has a better solution?

:slight_smile:

Is the order of items of importance? If not, you could apply a 50% width to li, float it and be done with it. But I strongly assume you do want the items to display in order. :slight_smile:

I want my list to display like this:

Code:

1 4
2 5
3 6

:slight_smile:

Maybe this “Test Your CSS Skills” quiz can help. ([url=http://www.sitepoint.com/forums/showthread.php?648340-CSS-Test-Your-CSS-Skills-Number-30-Multi-columns&p=4444774&viewfull=1#post4444774]Here’s the solution.)