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 be able work on Internet Explorer.
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:
This can be achieved using column-count css property on parent div,
like
check this out for more details.
How to make floating DIV list appear in columns, not rows
The legacy solution in the top answer didn't work for me because I wanted to affect multiple lists on the page and the answer assumes a single list plus it uses a fair bit of global state. In this case I wanted to alter every list inside a
<section class="list-content">
:more one answer after a few years!
in this article: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
HTML:
CSS:
I tried posting this as a comment, but couldn't get the columns to display right (as per your question).
You are asking for:
A B
C D
E
... but the answer accepted as the solution will return:
A D
B E
C
... so either the answer is incorrect or the question is.
A very simple solution would be to set the width of your
<ul>
and then float and set the width of your<li>
items like soExample here http://jsfiddle.net/Jayx/Qbz9S/1/
If your question is wrong, then the previous answers apply (with a JS fix for lacking IE support).
You can do this really easily with the jQuery-Columns Plugin for example to split a ul with a class of .mylist you would do
Here's a live example on jsfiddle
I like this better than with CSS because with the CSS solution not everything aligns vertically to the top.