Question

I have to deal with dynamic code that is being outputted via php, and I have only css and javascript at my disposal to use.

I have a single column of list items (not using

tags) that I need to divide into two columns (order doesn’t matter). Currently, I gave every item a css of ‘float: left;’ and every other item (using javascript) a css of ‘clear: left;’ and with a pre-defined width so that they equally divide into two columns.

The problem though, is that in the current setup, when a list item on the left column is tall, the shorter list item on the right gains a empty white space beneath it.

Is there a way to code the list into two columns without creating any unnecessary vertical space?

Answer 1

Here is a fiddle. Since you can use javascript I’m assuming you can load jQuery.

http://jsfiddle.net/manishie/r4zkp/3/

HTML:

<div id="wrapper">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three three three three three three three three </li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
    </ul>
</div>​

CSS:

.left_list, .right_list {
    float: left;
    width: 100px
}

Javascript:

$(function() {
    left_list = $('li:even');
    right_list = $('li:odd');
    $('#wrapper').html('');
    $('#wrapper').append('<div class="left_list">');
    $('.left_list').html(left_list);
    $('#wrapper').append('<div class="right_list">');
    $('.right_list').html(right_list);
});

​