How to display an unordered list in two columns?

Question

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.

Answer 1

Modern Browsers

leverage the css3 columns module to support what you are looking for.

http://www.w3schools.com/cssref/css3_pr_columns.asp

CSS:

ul {   columns: 2;   -webkit-columns: 2;   -moz-columns: 2; } 

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:

<div>     <ul class="columns" data-columns="2">         <li>A</li>         <li>B</li>         <li>C</li>         <li>D</li>         <li>E</li>         <li>F</li>         <li>G</li>     </ul> </div> 

JavaScript:

(function($){     var initialContainer = $('.columns'),         columnItems = $('.columns li'),         columns = null,         column = 1; // account for initial column     function updateColumns(){         column = 0;         columnItems.each(function(idx, el){             if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){                 column += 1;             }             $(columns.get(column)).append(el);         });     }     function setupColumns(){         columnItems.detach();         while (column++ < initialContainer.data('columns')){             initialContainer.clone().insertBefore(initialContainer);             column++;         }         columns = $('.columns');     }      $(function(){         setupColumns();         updateColumns();     }); })(jQuery); 

CSS:

.columns{     float: left;     position: relative;     margin-right: 20px; } 

EDIT:

As pointed out below this will order the columns as follows:

A  E B  F C  G D 

while the OP asked for a variant matching the following:

A  B C  D E  F G 

To accomplish the variant you simply change the code to the following:

function updateColumns(){     column = 0;     columnItems.each(function(idx, el){         if (column > columns.length){             column = 0;         }         $(columns.get(column)).append(el);         column += 1;     }); } 

Answer 2

I was looking at @jaider's solution which worked but I'm offering a slightly different approach that I think is more easy to work with and which I've seen to be good across browsers.

ul{     list-style-type: disc;     -webkit-columns: 2;     -moz-columns: 2;     columns: 2;     list-style-position: inside;//this is important addition } 

By default un-ordered list display the bullet position outside but then in some browsers it would cause some display problems based on the browser's way of laying out your website.

To get it to display in the format:

A B C D E 

etc. use the following:

ul li{     float: left;     width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns } ul{     list-style-type: disc; } 

This should solve all your problems with displaying columns. All the best and thanks @jaider as your response helped to guide me to discover this.