Question

I have a unordered list that I want to make fill 2 columns, I have just been floating each item left with a relative position, but it doesn’t always work the best. I know there has to be a better way. I need it to work on most browsers, as browser friendly as possible.

here is my current code.

html

<ul class="twocol">
    <li>Great Golf</li>
    <li>Weddings</li>
    <li>Fishing</li>
    <li>History</li>
    <li>Water Sports</li>
    <li>Horseback Riding</li>
    <li>Fishing</li>
    <li>Arts and Theater</li>
    <li>Camping</li>
    <li>Hiking</li>
    <li>Shopping</li>
    <li>Dining</li>
    <li>Antiquing</li>
    <li>Unique Lodging</li>
</ul>

css

ul.twocol, ol.twocol
{
    width: 100%;
}

ul.twocol li, ol.twocol li
{
    position: relative;
    float: left;
    width: 50%;
}

Answer 1

A better way, perhaps, less supported also, not sure what your browser requirements are though: http://jsfiddle.net/DFJuB/