I've been teaching myself HTML and CSS for a while now - I feel like I have a handle on most of the basics, but stumped on this one:

It's a simple enough question: Is there a (semi-!)clean way to use CSS to format an unordered (or ordered) list into two columns?

I'm afraid I'll have to try something like splitting the list into two and floating one to the right..... but I hoped someone smarter than I am might know a better way... I'm sure I've seen it around somewhere, but can't seem to locate an example when I need it, and a search through quite a few forums comes up blank.

The specific question:

With code

<ul>
<li><a href="">Link One</a></li>
<li><a href="">Link Two</a></li>
<li><a href="">Link Three</a></li>
<li><a href="">Link Four</a></li>
<li><a href="">Link Five</a></li>
<li><a href="">Link Six</a></li>
</ul>

Is there any way to make it display as:

• Link One • Link Four
• Link Two • Link Five
• Link Three • Link Six

Or,

• Link One • Link Two
• Link Three • Link Four
• Link Five • Link Six

***** But with the bullets in the right hand column aligned.

QUESTION TWO:

Also, as an aside.... I've got an unordered list in my site, and I've set the li items to display: inline ... which makes them run on, and I've spaced them out by setting the margin-right to 1em (/ c. 10px for me).

Problem is: there's always an indentation at the beginning of the first line that I can't seem to remove by setting a negative margin-right.

I suspect it's something to do with the browser insisting on leaving space for a 'bullet' that's not being displayed.....

Any thoughts?

Thanks guys.... I'd really appreciate any thoughts :)

[edited by: mavb at 8:57 am (utc) on Jan. 14, 2007]