Two-column dynamic multi-line list floating elements

Question

I have a dynamic list that I need in order to line up the list well in 2 columns using CSS, and I have a terrible time with it.

The markup is similar to the following:

<ul>
<li>A is for apples</li>
<li>B is for bananas which are yellow in color</li?
<li>C is for cupcakes</li>
....
</ul>

When I just pass li the width and float them to the left, they release the funny ones and end up being formatted similarly to this:

A is for apples        B is for bananas which
                       are yellow in color
C is for cupcakes      D is for dirtbag

I need formatting to get the 3rd directly below the first line - regardless of the height of any of the list items, for example:

A is for apples        B is for bananas which
C is for cupcake       are yellow in color
D is for dirtbag

Each li text is extracted from the database, and I can not control how long each of them is.

Clarification Update - The list may also exit the database as follows:

<ul>
<li>A is for apples that grow on trees</li>
<li>B is for boat</li>
<li>C is for cupcakes</li>
<li>D is for dishes - that sure don't wash themselves</li>
....
</ul>

Formatting required:

A is for apples that   B is for boat
grow on trees          C is for cupcake
D is for dishes -      E is.....
that sure don't wash
themselves

/ lightening

. , 2 <ul>, , <li> , 2-15 , , . , :/

Answer 1

, , IE css3.

, javascript- IE (, jQuery ), .

Answer 2

, ?

http://jsfiddle.net/Mutant_Tractor/fe2as/

JQuery:

$('li').each(function(e) {
    $var = $(this).height();
    if ($var > 25) {
        $(this).addClass('second')
    } else {
        $(this).addClass('first')
    }
});

, , ...

Answer 3

Javascript, IE 9+ ( , , , IE).

, ( CSS left right) , .

, View, this ( <ul>).

alignContainers: function() {
    var thisView = this,
        numOfElements = 0;

    thisView.$el.find("> div").removeClass("left right")
    .each( function() {

        if (this.offsetHeight != 0 && this.offsetWidth != 0) {
            var leftHeight = 0,
                rightHeight = 0;

            thisView.$el.find(" > .left").each(function() {
                leftHeight += this.offsetHeight;
            });

            thisView.$el.find(" > .right").each(function() {
                rightHeight += this.offsetHeight;
            });

            if (numOfElements == 0) {
                $(this).addClass("left").removeClass("right");                            
            } else if (leftHeight < rightHeight) {
                $(this).addClass("left").removeClass("right");
            } else {
                $(this).addClass("right").removeClass("left");       
            }

            numOfElements++;

        } else {
            $(this).removeClass("left right")
        }
    });
}

Answer 4

.

<dl>
   ...   
   <dt>B</dt>
   <dd>is for bananas which are yellow in color</dd>
</dl>