How to divide and display categories into two columns

Question

I am using custom taxonomies. I have multiple categories and each category has multiple children. I would like to display the categories in two columns on my homepage similar to linkcentre.com.

I tried using wp_list_categories but could not split its output into two columns.

I tried this solution but it only works when there are no subcategories.

Thanks

Answer 1

You don't need any code changes to your PHP or html!

Assuming the following code was used:

<ul class="mypagelist">
    <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>

Resulting in:

<ul class="mypagelist">
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Page 4
        <ul>
            <li>Subpage 1</li>
        </ul>
    </li>
    <li>Page 5</li>
</ul>

Use CSS along the following lines:

.mypagelist { width:600px; /* or any other size */ }
.mypagelist li { float:left; width:290px; margin-right:10px /* width + margin = width of parent divided by 2 */ }
.mypagelist li ul { display: none; /* don't show subpages */ }

Finally, we need a clearing element at the end ( or on the container containing the page list call ). e.g. <div style="clear:left;"></div>, although I would avoid inline styling where possible.

The same can be done for any unordered list, categories, pages, nav menus, etc