Multi-column unordered list

[djfenom]

I'm trying to create a vertical unordered list that displays the order from top to bottom and then starts a new column after say 5 items have been displayed.

Something like this:

HTML

<ul>
<li>Michael Spencer</li>
<li>Christopher Purchas</li>
<li>Michael Harvey</li>
<li>John Slater</li>
<li>Antony Edwards</li>
<li>Roger ter Haar</li>
<li>Andrew Bartlett</li>
<li>Simon Brown</li>
</ul>

CSS

li {
display:block;
padding:2px 15px;
width:30%;
float:left;
text-align: left;
background-image:url(images/bullet.gif);
background-repeat:no-repeat;
background-position: 0px 6px;
}

At present, this displays something like this with the order going from left to right:

Michael Spencer --- Christopher Purchas --- Michael Harvey
John Slater -------- Antony Edwards ------ Roger ter Haar
Andrew Bartlett ---- Simon Brown

What I would like is the order going from top to bottom and after about 5 items have been displayed, the order carries on into the next column:

Michael Spencer ------ John Slater -------- Andrew Bartlett
Christopher Purchas --- Antony Edwards --- Simon Brown
Michael Harvey -------- Roger ter Haar

I'm not entirely sure this is possible, but if anyone could help, that would be great.

Thanks

Chris

[bradyj]

I don't think there's an easy way to do that -- we've had discussions about this before -- similarily, I'd like to be able to have text 'overflow' into different columns like we do in print design in InDesign or Quark. Just like a newspaper article.

However, a simple way may be to just make your CSS a fixed height, then do an auto width... would that bounce the stuff too close to the right?

[djfenom]

That doesn't seem to work, anyone else have any ideas.

Thanks

[brothercake]

Float the list-items left and give them a set width in "em" (like "7em" or thereabouts), then set the <ul> width to 100% - they'll form a row, breaking over into multiple rows as necessary. Now, keep reducing the <ul> width bit by bit (also as a value in "em") until it gets to the point where it naturally forms that structure.

I think ... at least you should be able to get fairly close - try it :)

[djfenom]

Thanks for your message. Just tried that and it still orders from left to right however much tweaking I do.

Thanks

Chris