html - need to align part of list item to right of li - using CSS3 Jquery column-layout -

using jquery script acheive css3 3-columns, display list of members alphabetically.

i need display way, does:

a   d b   e c   f 

here using http://www.csscripting.com/css-multi-column/example6.php? (using js file http://www.csscripting.com/js/v1.0beta/css3-multi-column.js)

to right of each member, has phone extension, want float right, easy read.

i tried putting phone extension within div , span , when that, tends screw @ last item in each column, placing person's name correctly, extension first item in next column.

screenshot: http://cl.ly/fq4 of doing

html code:

<div class="article3col">     <ul>         <li>doe, john             <div style="float:right;">                 8317             </div>         </li>         <li>doe, sally             <div style="float:right;">                 8729             </div>         </li>         <li>doe, john             <div style="float:right;">                 8317             </div>         </li>         <li>doe, sally             <div style="float:right;">                 8729             </div>         </li>         <li>doe, john             <div style="float:right;">                 8317             </div>         </li>         <li>doe, sally             <div style="float:right;">                 8729             </div>         </li>         <li>doe, john             <div style="float:right;">                 8317             </div>         </li>         <li>doe, sally             <div style="float:right;">                 8729             </div>         </li>         <li>doe, john             <div style="float:right;">                 8317             </div>         </li>         <li>doe, sally             <div style="float:right;">                 8729             </div>         </li>         <li>doe, john             <div style="float:right;">                 8317             </div>         </li>         <li>doe, sally             <div style="float:right;">                 8729             </div>         </li>         <li>doe, john             <div style="float:right;">                 8317             </div>         </li>         <li>doe, sally             <div style="float:right;">                 8729             </div>         </li>         <li>doe, john             <div style="float:right;">                 8317             </div>         </li>         <li>doe, sally             <div style="float:right;">                 8729             </div>         </li>         <li>doe, john             <div style="float:right;">                 8317             </div>         </li>         <li>doe, sally             <div style="float:right;">                 8729             </div>         </li>     </ul> </div> 

css:

.article3col {     column-count:3; } 

any appreciated.

although unable work markup have used (and code provided), took code example site borrowed technique , able find solution following additional css , markup:

css:

li div { text-align:right; } li div span { float:left; } 

example html snippet:

<li><div><span>doe, john</span> 8317</div></li> 

you should know during testing did find other problems technique site (and therefore why it's listed beta). changed ul ol see how many items had created in test code. each column started numbering on previous column's last item number (i.e.: last item number in col1: 7, first item number in col2: 7).