How can I display a <ul> as two side-by-side columns using CSS?

Question

How can I make 2 columns consisting of 3 rows ?

<ul>

<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>

<li>Item-4</li>
<li>Item-5</li>
<li>Item-6</li>

</ul>

Thank you

Solution 1

A simple pure CSS solution would be to have the List Items be 1/2 the width, and have them float left. This is an acceptable solution, so long as you can accept the following output.

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

The CSS would be:

ul.class-name li {
    float:left; width:50%;
}

There are some simple considerations:

• In IE pre 9, your container (ul) must have a width attributed.
• At 50%, you don't have any room for padding or border based on the way IE pre 9 calculates these vs. other browsers. (i.e. one incorporates padding into the specified width, the other adds padding to the width). Going down to somewhere between 47 and 49% often fixes those measly bugs.

Unfortunately, that is the only way the output can be if you are looking for pure CSS. If you need:

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

... then, Valchris' solution may be best for you.

FuzzicalLogic

Solution 2

Here's a terrible-but-amusing CSS1 solution I put together years ago:
http://phrogz.net/tmp/two-column-list-pure-css.html

:)