How I can do a 2-column list in valid XHTML/CSS?

Question

I have to build a page that has a list that fits in two columns. This list is generated by PHP so needs to be easy to add inputs.

It should like to:

* Lorem Ipsum           * Lorem Ipsum
* Lorem Ipsum           * Lorem Ipsum
* Lorem Ipsum           * Lorem Ipsum
* Lorem Ipsum           * Lorem Ipsum
* Lorem Ipsum           * Lorem Ipsum

I would like to know if there is some way to generate this with a basic structure of <ul /> and <li /> :

<ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
</ul>

I need to support major browsers (and IE7, 6 not supported).

Thank you in advance!

Answer 1

I have found the solution to this:

ul li {
    margin: 0;
    padding: 0;
    width: 50%;
    float: left;
}

Answer 2

As explained here , a simple way to do that is to give an explicit width to the list and its items and have the items float to the left:

ul {
    width: 700px;
}

li {
    width: 200px;
    float: left;
}

Answer 3

You're looking for the CSS3 multicolumn property. Unfortunately, unlike a lot of the cool features that are provided in the CSS3 specs, hardly any browser supports this as of yet. There is a javascript available though that can make it work in most browsers:

http://www.alistapart.com/articles/css3multicolumn/