Standard's Compliant Column List

I saw many attempts at making multi-column lists on the web. Most were not W3C standards compliant. Those that were compliant had intrusive scripts or complicated styles applied. I solve this problem by declaring column classes and and increamenting styles. The down side to this method is list-items with wrapping text will not render properly.

I've provided a few real examples (not images).

one
two
three
four
five
six
seven
eight
nine

one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thirteen
fourteen

one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thirteen
fourteen
fifteen
sixteen
seventeen
eighteen
nineteen

Wrapped List-Item Example (errors on li # 19)

one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thirteen
fourteen
fifteen
sixteen
seventeen
eighteen
And many many more numbers to come...

Here's the style code for each column:

.c2 .r{position:absolute; top:0em; left:50%}/*top to start first of m column, left column r starts 50% over from the left edge*/
            .c2 .r+.r{top:1.2em}
            .c2 .r+.r+.r{top:2.4em}
            .c2 .r+.r+.r+.r{top:3.6em}
            .c2 .r+.r+.r+.r+.r{top:4.8em}
            
            /* Three Columns */
            .c3{border:solid 1px Green; padding:0px; position:relative; width:250px}/*width to push columns together, position so each li will position properly*/
            .c3 li{line-height:1.2em; width:33%; margin:0px 0px 0px 25px}/*line-height for position calc, width is 100% divided by columns, margin to show list numbers*/

.c3 .m{position:absolute; top:0em; left:33.3%}/*top to start first of m column, left column m starts 33% over from the left edge*/
            .c3 .m+.m{top:1.2em}/*top taken from line-height*/
            .c3 .m+.m+.m{top:2.4em}/*top increaments for each item by line-height:1.2em*/
            .c3 .m+.m+.m+.m{top:3.6em}
            .c3 .m+.m+.m+.m+.m{top:4.8em}

.c3 .r{position:absolute; top:0em; left:66.6%}/*top to start first of m column, left column r starts 66% over from the left edge*/
            .c3 .r+.r{top:1.2em}
            .c3 .r+.r+.r{top:2.4em}
            .c3 .r+.r+.r+.r{top:3.6em}
            .c3 .r+.r+.r+.r+.r{top:4.8em}
            
            /* Four Columns */
            .c4{border:solid 1px Green; padding:0px; position:relative; width:360px}/*width to push columns together, position so each li will position properly*/
            .c4 li{line-height:1.2em; width:25%; margin:0px 0px 0px 25px}/*line-height for position calc, width is 100% divided by columns, margin to show list numbers*/

.c4 .b{position:absolute; top:0em; left:25%}/*top to start first of m column, left column m starts 33% over from the left edge*/
            .c4 .b+.b{top:1.2em}/*top taken from line-height*/
            .c4 .b+.b+.b{top:2.4em}/*top increaments for each item by line-height:1.2em*/
            .c4 .b+.b+.b+.b{top:3.6em}
            .c4 .b+.b+.b+.b+.b{top:4.8em}
            
            .c4 .c{position:absolute; top:0em; left:50%}/*top to start first of m column, left column m starts 33% over from the left edge*/
            .c4 .c+.c{top:1.2em}/*top taken from line-height*/
            .c4 .c+.c+.c{top:2.4em}/*top increaments for each item by line-height:1.2em*/
            .c4 .c+.c+.c+.c{top:3.6em}
            .c4 .c+.c+.c+.c+.c{top:4.8em}

.c4 .d{position:absolute; top:0em; left:75%}/*top to start first of m column, left column r starts 66% over from the left edge*/
            .c4 .d+.d{top:1.2em}
            .c4 .d+.d+.d{top:2.4em}
            .c4 .d+.d+.d+.d{top:3.6em}
            .c4 .d+.d+.d+.d+.d{top:4.8em}
        </style>

Here's the html code for each column:

<ol class="c2">
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>

<li class="r">six</li>
            <li class="r">seven</li>
            <li class="r">eight</li>
            <li class="r">nine</li>   
        </ol>
        
        <ol class="c3">
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>

<li class="m">six</li>
            <li class="m">seven</li>
            <li class="m">eight</li>
            <li class="m">nine</li>
            <li class="m">ten</li>

<li class="r">eleven</li>
            <li class="r">twelve</li>
            <li class="r">thirteen</li>
            <li class="r">fourteen</li>    
        </ol>
        
        <ol class="c4">
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>

<li class="b">six</li>
            <li class="b">seven</li>
            <li class="b">eight</li>
            <li class="b">nine</li>
            <li class="b">ten</li>
            
            <li class="c">eleven</li>
            <li class="c">twelve</li>
            <li class="c">thirteen</li>
            <li class="c">fourteen</li>  
            <li class="c">fifteen</li>
            
            <li class="d">sixteen</li>
            <li class="d">seventeen</li>
            <li class="d">eighteen</li>
            <li class="d">nineteen</li>  
        </ol>