Multiple column unordered list cross browser

Hi

Having gone through some of the threads on this topic e.g.

I wondered if anyone has found a cross browser solution? I’m using a popular open-source CMS to output data, so without having to crunch a bunch of PHP code I am somewhat limited on my solution.

I have an unordered list with n items in it. The number of items varies. A certain number of the items (x) need to show in a left hand column, the remainder (y) in the right.

This is what I have so far:


.view-finding ul {
	padding: 0;
	width: 100%;
	margin: 0;
}
.view-finding ul li {
	margin:0;
	padding:0;
	list-style-type: none;
	width: 50%;
}
.view-finding .views-left {
	float: left;
	clear: left;
}
.view-finding .views-right {
	float: right;
        clear: right;
}

<div class="view-finding">
<ul>
<li class="views-right">Item 1</li>
<li class="views-right">Item 2</li>
<li class="views-right">Item 3</li>
<li class="views-right">Item 4</li>
<li class="views-left">Item 5</li>
<li class="views-left">Item 6</li>
</ul>
</div>

I’ve tried every combination of clear statements, or float, width even using top and right/left at times. But none of them work in all browsers.

Help!

Hi, CSS3 has a nice Multi column layout module but since only a select few browsers have support for that, you could fake it by using techniques from [url=http://www.sitepoint.com/forums/showthread.php?p=4438623#post4438623]this quiz which basically is (with your example) having it appear like this

Item 1 Item 3 Item 5
Item 2 Item 4 Item 6

The link above will explain a lot better so I’m going tl leave it at that :).

This looks very promising. Thanks again for pointing this out to me.

Al

You’re welcome :).