print friendly version of floated list

Question

I have a list of phone extensions that I want to print a friendly version of it.

I have a print css for it to print appropriately onto paper, the extensions are located within an unordered list, which are floated to the left.

<ul>
  <li>Larry Hughes <span class="ext">8291</span></li>
  <li>Chuck Davis <span class="ext">3141</span></li>
  <li>Kevin Skillis <span class="ext">5115</span></li>
</ul>

I float it left, and when it prints the second page, it leaves off the name part of the list (in Firefox, works fine in Google Chrome and IE), see here: http://cl.ly/de965aea63f66c13ba32

I am referring to this: http://www.alistapart.com/articles/goingtoprint/ - they mentioned something about applying a float:none; to the content part of the page. If I do that, how should I go about making the list show up in 4 columns? It is a dynamic list, pulled from a database.

Any help is appreciated.

Answer 1

If the purpose of the list is to associate names with extensions, then a dl or table would be more appropriate. If the purpose of the list is merely to list names and the extensions are just… extra, I guess you're alright with the ul — as for that ul, this CSS seems to work alright here:

/**/@media print {
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 12px/18px sans-serif;
}
li {
    float: left;
    width: 24%;
    margin: 0 1% 0 0;
    position: relative;
    border-bottom: 1px solid gray;
}
li 
span {
    position: absolute;
    right: 0;
    top: 0;
}
/**/}