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

Posted by Brad on Stack Overflow See other posts from Stack Overflow or by Brad
Published on 2010-04-27T16:52:21Z Indexed on 2010/04/27 16:53 UTC
Read the original article Hit count: 428

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about css

Related posts about css3