Make List 2 Columns

Please take a look at the footer of http://www.animefushigi.com/, I am trying to make the affiliate list 2 columns, as 1 is too long.

The code is as follows

    <ul class="none"><li><span>Affiliates<em>&nbsp;</开发者_如何学JAVAem></span></li>
<li>link 1</li>
<li>link 2</li>
etc etc

you can try something like this using only css: http://jsfiddle.net/seler/ThvUJ/ (wont work in ie lte 8)

but i think the best way to do it will be making js script, which will count li elements and add </ul><ul> if necessary. (example: http://jsfiddle.net/seler/ThvUJ/3/)

If the order doesn't matter (and I'm assuming it doesn't because you're using an unordered list), you could achieve this effect with your current HTML. Just float your list elements in such a way that only two of them can fit per line. Below is a quick example of what I mean:

ul { 
    width: 200px;
    list-style: none;
}
li {
    float: left;
    width: 90px; /* 100 - 5 - 5 */
    margin: 3px 0;
    padding: 0 5px;
}
li a {
    width: 90px;
    display: block;
}

maybe you can make nested ul like this:

<ul class="none">
<li><span>Affiliates<em>&nbsp;</em></span></li>
 <ul>
  <li>link 1</li>
  <li>link 2</li>
 </ul>
 <ul>
  <li>link 3</li>
  <li>link 4</li>
 </ul>
</ul>

If you want your footer to be a specific height, you can do this: http://jsfiddle.net/NfMPX/

Basically, set the height of the ul and float and set a width for the lis and they will automatically wrap.