display unknown number of elements

Question

I need to show "x" number of cateogories in a menu (basically a hidden div that pop up when someone clicks on a nav menu called "Category"). No problem with the div, but I am struggling with arranging the categories in any form of order inside the div. I don't want it to be a single column list an stretch all the way down to the page, so I would like either a multi column list or something else. I hear multi column list have compatibility challenges and are difficult to deal with. What other options do I have?

Something similar to the category list at http://www.answerbag.com/

Thanks

Answer 1

Not so much, no. Coding a multi column list is easy as long as you're careful about your widths and clearing floats:

HTML

<div id="list">
    <ul>
        <li>Cat 1</li>
        <li>Cat 2</li>
        <li>Cat 3</li>
    </ul>
    <ul>
        <li>Cat 4</li>
        <li>Cat 5</li>
        <li>Cat 6</li>
    </ul>
    <div class="clear"></div>
</div>

CSS

#list {
    width: 400px;
}

#list ul {
    float: left;
    width: 200px; /* This width should be #list width divided by number of columns */
    margin: 0;
    padding: 0;
    list-style: none;
}

#list li {
    margin: 0;
    padding: 5px 0;
}

.clear {
    clear: both;
}

Answer 2

I was writing up an answer, but this article does a better job:

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

It covers a number of different options, including the floated method used at answerbag, and one or two that are semantically more sensible while still ordering by column instead of by row.