CODEWITHSUNDEEP
htmlcss
ipalaus
ipalaus

Reputation: 2273

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

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!

Upvotes: 2

Views: 291

Answers (3)

Stephan Muller
Stephan Muller

Reputation: 27600

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/

Upvotes: 0

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262939

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;
}

Upvotes: 2

ipalaus
ipalaus

Reputation: 2273

I have found the solution to this:

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

Upvotes: 2

Related Questions