User:Windinthew/Multi-column lists

Multiple lists side-by-side formatted in a table
NVDA reads as two downwards-ordered lists (and does not mention "table"), but David B did not point to this solution and suggested it was better not to put a list inside a table.

Multiple div-separated lists floated side-by-side
 Aloe Bergamot Calendula Damiana2solution and suggested it was better not to put a list i was better not to put a list Elderflower 

 Feverfew Ginger</li> Hops</li> Iris</li> Juniper</li> </ul>

 Kava kava</li> Lavender</li> Marjoram</li> Nutmeg</li> Oregano</li> Pennyroyal</li> </ul> /* position list chunks side by side */ div.wrapper { float: left; width: 10em; }

/* clear float after lists */ br { clear: left; }

A single list wrapped with margin-left and negative margin-top
 <li style="margin-left: 0em"> Aloe</li> <li style="margin-left: 0em"> BergamotBergamotBergamot Bergamot</li> <li style="margin-left: 0em"> Calendula</li> <li style="margin-left: 0em"> Damiana</li> <li style="margin-left: 0em"> Elderflower</li>

<li style="margin-left: 10em; margin-top: -8em"> Feverfew</li> <li style="margin-left: 10em"> Ginger</li> <li style="margin-left: 10em"> Hops</li> <li style="margin-left: 10em"> Iris</li> <li style="margin-left: 10em"> Juniper Juniper Juniper Juniper JuniperJuniper</li>

<li style="margin-left: 20em; margin-top: -8em"> Kava Kava</li> <li style="margin-left: 20em"> Lavender</li> <li style="margin-left: 20em"> Marjoram Marjoram Marjoram Marjoram Marjoram Marjoram</li> <li style="margin-left: 20em"> Nutmeg</li> <li style="margin-left: 20em"> Oregano</li> <li style="margin-left: 20em"> Penny Royal</li> </ul>

/* separate the list from surrounding elements */ ol { margin: 0 0 1em 2em; padding: 0; }

ol li { /* Stipulate the height of each item so that vertical return = items * height */

line-height: 1.2em;

/* Clear the default margins & padding so we can style the list from scratch */

margin: 0; padding: 0; }

/* If li position is left static, Internet Explorer disables hyperlinks in the list in all but the final column.

This rule will be processed only by Internet Explorer because only IE believes that there’s a level above HTML: */

{	position: relative; }
 * html ol li

/* horizontal position of each column */

ol li.column1 { margin-left: 0em; } ol li.column2 { margin-left: 10em; } ol li.column3 { margin-left: 20em; }

/* Bring the first item of each column back up to the level of item 1. Vertical return = items * height. Here, 5 items * 1.2em line-height = 6em */

li.reset { margin-top: -6em; }

A single list styled into multiple columns
Recommended by David B but he says not supported by IE until IE10...

There is a hack at http://jsfiddle.net/NJ4Hw/ that works on IE <10 but orders the list left to right.
 * apple
 * carpet
 * geography
 * mountain
 * nowhere
 * postage
 * ragged
 * toast