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

Question

Using this jquery script to acheive CSS3 3-columns, to display a list of members alphabetically.

I need it to display this way, which is does:

A   D
B   E
C   F

Here is what I am using http://www.csscripting.com/css-multi-column/example6.php? (using this js file http://www.csscripting.com/js/v1.0beta/css3-multi-column.js)

To the right of each member, it has their phone extension, which I want to float to the right, so it easy to read.

I tried putting the phone extension within a div and span and when I do that, it tends to screw up at the last item in each column, by placing the person's name correctly, but their extension is the very first item in the next column.

Screenshot: http://cl.ly/fq4 of what it is 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 help is appreciated.

Answer 1

I would try one of two things:

Wrap each name with a span that is floated left like this:

<li>
    <span style="float:left;">Doe, Sally</span>
    <div style="float:right;">
        8729
    </div>
</li>

Place each extension div before their corresponding names in the HTML code like this:

<li>
    <div style="float:right;">
        8729
    </div>
    Doe, Sally
</li>

Answer 2

Although I was unable to get it to work with the markup you have already used (and the code you provided), I took the code from the example site you borrowed the technique from and was able to find a solution with the following additional CSS and 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 that during testing I did find other problems with the technique from that site (and therefore probably why it's listed as Beta). I changed the UL to an OL to see how many items I had created in the test code. Each column started the numbering over from the previous column's last item number (i.e.: Last item number in col1: 7, first item number in col2: 7).

Answer 3

If the issue doesn't come from the limitations of this beta version

(BrendonKoz already pointed out that matter, but it is likely we should certainly take their #5 limitation "Be aware that the markup of your page is modified by the javascript, so it is possible that some CSS rules may not work after the multi-column layout is applied" for what it means),

out of the blue, I would have tried to

.Article3Col li {
   clear: both;
}

in my stylesheet.

If this doesn't do it, Firebug (or equivalent, if any) will be handly in telling you what the 3-column-script modified in your DOM, and what to adapt in your CSS to match both your new DOM and your design requirements.