With the following HTML, what is the easiest method to display the list as two columns?
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
Desired display:
A B
C D
E
The solution needs to work with Internet Explorer.
Best Answer
Modern Browsers
leverage the css3 columns module to support what you are looking for.
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS:
http://jsfiddle.net/HP85j/8/
Legacy Browsers
Unfortunately for IE support you will need a code solution that involves JavaScript and dom manipulation. This means that anytime the contents of the list changes you will need to perform the operation for reordering the list into columns and reprinting. The solution below uses jQuery for brevity.
http://jsfiddle.net/HP85j/19/
HTML:
JavaScript:
CSS:
EDIT:
As pointed out below this will order the columns as follows:
while the OP asked for a variant matching the following:
To accomplish the variant you simply change the code to the following: