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.
