Is it possible to split a UL list into two columns?

[Cristian]

Hi!,
Is it possible to split LI elements from a single UL list, into two
columns?

This is my current Ul list:
http://img374.imageshack.us/img374/8278/ulsinglecolumnjl5.png

And I want to look like this:
http://img507.imageshack.us/img507/4497/ultwocolumngx6.png

I know I can make this happen using two UL lists, floating them to the
same side, but I want to know if this can be done using a single list.

Thank you very much,

Cristian

 

[dorayme]

Hi!,
Is it possible to split LI elements from a single UL list, into two
columns?

This is my current Ul list:
http://img374.imageshack.us/img374/8278/ulsinglecolumnjl5.png

And I want to look like this:
http://img507.imageshack.us/img507/4497/ultwocolumngx6.png

I know I can make this happen using two UL lists, floating them to the
same side, but I want to know if this can be done using a single list.

You can do it easily with what is probably, in its essentials, a table.
With two columns of course. Presumably, you do not want just 2 ULs for a
reason (you admit it does the presentational job, right?). So it must be
for a good semantic reason. That reason to me suggests table is the tool
for you.

 

[Jonathan N. Little]

Hi!,
Is it possible to split LI elements from a single UL list, into two
columns?

This is my current Ul list:
http://img374.imageshack.us/img374/8278/ulsinglecolumnjl5.png

And I want to look like this:
http://img507.imageshack.us/img507/4497/ultwocolumngx6.png

I know I can make this happen using two UL lists, floating them to the
same side, but I want to know if this can be done using a single list.

No

 

[Cristian]

You can do it easily with what is probably, in its essentials, a table.
With two columns of course. Presumably, you do not want just 2 ULs for a
reason (you admit it does the presentational job, right?). So it must be
for a good semantic reason. That reason to me suggests table is the tool
for you.

Thank you very much, I think your solution will do the job.

 

[Toby A Inkster]

I know I can make this happen using two UL lists, floating them to the
same side, but I want to know if this can be done using a single list.

Yes, using the CSS3 multi-column module. It's supported in recent
versions of Firefox and Safari, but not yet in Opera (possibly v10) or
Internet Explorer.

Basic idea:

ul
{
columns: 2 12em; /* two columns, each 12em width */
column-gap: 1em; /* spacing between columns */
column-rule: 1px dashed silver; /* border between columns */
}

However, because support is still experimental, both Webkit and Gecko
require a little prefix to persuade them to support columns:

ul
{
columns: 2 12em; /* two columns, each 12em width */
column-gap: 1em; /* spacing between columns */
column-rule: 1px dashed silver; /* border between columns */
-moz-columns: 2 12em; /* for Gecko */
-moz-column-gap: 1em;
-moz-column-rule: 1px dashed silver;
-webkit-columns: 2 12em; /* for WebKit */
-webkit-column-gap: 1em;
-webkit-column-rule: 1px dashed silver;
}

For Opera and Internet Explorer, you could try this script which reads
CSS3 multi-col styles and rewrites them as floated DIVs:

http://www.csscripting.com/css-multi-column/

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 15 days, 19:04.]

Tagliatelle with Fennel and Asparagus
http://tobyinkster.co.uk/blog/2008/04/06/tagliatelle-fennel-asparagus/

 

[dorayme]

For Opera and Internet Explorer, you could try this script which reads
CSS3 multi-col styles and rewrites them as floated DIVs:

http://www.csscripting.com/css-multi-column/

To deliver to a large audience what he was reluctant to deliver in the
first place to an even larger one.

 

[Bergamot]

http://www.csscripting.com/css-multi-column/

It's hard to take seriously any site that uses the incredibly stupid rules:

body {
font-size: 62.5%; /* Resets 1em to 10px */ NO IT DOESN'T
}
#Content {
font-size: 1.45em;
}


They have no clue, AFAIC.