I have some check boxes & labels that display in a 2 column format. The content goes from left - right , then the next row & so on.
I need the content to go from top - bottom in first column & then top - bottom in the 2nd column. Is this possible ? I can't change (at the most make limited changes to) the HTML as the content comes from a database
Thanks

The content now is like
A B
C D
E F
G H

I need it like

A E
B F
C G
D H

Here is the HTML & CSS


Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#MyList {width:500px; list-style:none; margin:0 auto 0 auto;}
#MyList li {list-style-type:none; float:left; width:250px; }
#MyList li label{width:200px;	padding:2px 10px 0 8px; display:inline-block;}
</style> 
</head>
<body>
<ul id="MyList">

        <li><input id="i1" type="checkbox" /><label for="i1">A- Item List</label></li>
        <li><input id="i2" type="checkbox" /><label for="i2">B- Item List</label></li>
        <li><input id="i3" type="checkbox" /><label for="i3">C- Item List</label></li>
        <li><input id="i4" type="checkbox" /><label for="i4">D- Item List</label></li>
        <li><input id="i5" type="checkbox" /><label for="i5">E- Item List</label></li>
        <li><input id="i6" type="checkbox" /><label for="i6">F- Item List</label></li>
        <li><input id="i7" type="checkbox" /><label for="i7">G- Item List</label></li>
        <li><input id="i8" type="checkbox" /><label for="i8">H- Item List</label></li>
        <li><input id="i9" type="checkbox" /><label for="i9">I- Item List</label></li>
        <li><input id="i10" type="checkbox" /><label for="i10">J- Item List</label></li>
</ul>
</body>
</html>