CODEWITHSUNDEEP
htmlcss
GreatestSwordsman
GreatestSwordsman

Reputation: 1185

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;</em></span></li>
<li>link 1</li>
<li>link 2</li>
etc etc

Upvotes: 2

Views: 1529

Answers (4)

Wex
Wex

Reputation: 15695

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;
}

Upvotes: 2

seler
seler

Reputation: 9193

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/)

Upvotes: 3

Shauna
Shauna

Reputation: 9596

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.

Upvotes: 1

bungdito
bungdito

Reputation: 3620

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>

Upvotes: 1

Related Questions