View source for User talk:Windinthew/Multi-column lists

__TOC__

{{ednote|
These are unordered lists. There are further considerations with ordered lists not explored here.}}  


==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.   

{|
|-
| valign="top" |
* 1 You have followed a
* 2 page that does not exist yet. To create the page, 
| valign="top" |
* 3 start typing   
* 4 in the box below (see the help page for more info).
* 5 If you are here by mistake, click your browser's back button.
| valign="top" |
* 6You have followed a link to a page that does not exist yet. To create the page, start typing in the box below 
* 7 (see the help page for more info). If you are here by mistake, click your browser's back button.
* 8 short
|}


==Multiple div-separated lists floated side-by-side==  

<div style="float: left; width: 10em;">
  <ul>
    <li>AloeAloe</li>
    <li>BergamotBergamotBergamotBergamot Bergamot</li>
    <li>Calendula</li>
    <li>Damiana</li>
    <li>Elderflower</li>
  </ul>
</div>

<div style="float: left; width: 10em;">
  <ul>
    <li>Feverfew</li>
    <li>Ginger</li>
    <li>HopsHopsHopsHopsHopsHops</li>
    <li>Iris</li>
    <li>Juniper</li>
</ul>
</div>

<div style="float: left; width: 10em;">
  <ul>
    <li value="11">Kava kava</li>
    <li>Lavender</li>
    <li>Marjoram</li>
    <li>Nutmeg</li>
    <li>OreganoOreganoOreganoOregano OreganoOreganoOreganoOreganoOregano</li>
    <li>Pennyroyal</li>
</ul>
</div>
<div style="clear:both"></div>
  
<pre>
/* position list chunks side by side */
div.wrapper
{
  float: left;
  width: 10em;
}

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

</pre>


==A single list wrapped with margin-left and negative margin-top== 

<ul>
  <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>
<div style="clear:both"></div>

<pre>
/* 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: */

* html ol li
{
	position: relative;
}

/* 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;
}
</pre>


==A single list styled into multiple columns==

'''Recommended by David B but he says not supported by IE until IE10'''
 
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
*apple
*carpet
*geography
*mountain
*nowhere
*postage
*ragged
*toast
</div>