Multiple column unordered list cross browser


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 {
	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">
<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>

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.


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=]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.


You’re welcome :).