Skip to main content
Inspiring
October 2, 2008
Question

How to make two column list from array?

  • October 2, 2008
  • 14 replies
  • 897 views
Hi All,

I want to display an unordered list, generated by an array, in two
columns. How can this be done?

> <ul>
> <?php
> // take text field and create array using explode
> $farray = explode(', ', $row_fieldArray['features']);
> // loop through the array to process each line
> foreach ($farray as $value) {
> // output each line as a <li> element
> echo "<li> $value </li>"; }
> ?>
> </ul>

I thought of enclosing the <ul> in a width constrained div and setting
the <li> to float left, but I know that shorter length <li> elements
will cause more bullets per "line" than longer ones. How can I create a
two or three column list of bullet points?

TIA

Brett
This topic has been closed for replies.

14 replies

Inspiring
October 2, 2008
On 02 Oct 2008 in macromedia.dreamweaver.appdev, Michael Fesser wrote:

> True. But I've already played around a bit with it. I tried it on track
> listings of music CDs. In most browsers it was just a single list, but
> FF showed it as a two-column list. Looked good.

Got a sample?

--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/contact.php
Inspiring
October 2, 2008
.oO(Brett)

>Thanks Micha,
>
>I've decided to go with the first solution of specifying the width of
>the <ul> element and setting a specific width for the <li> too. You are
>right, it does leave gaps in between when some lines run longer, but I
>don't find it too offensive.

OK. I just got the same effect a while ago in an image gallery, which
contained images of different height. Sometimes it was just a single
pixel, but it was enough to cause such gaps. And in a gallery this looks
really ugly. If it's not too bad in your case - good.

>Yes, the column support in CS3 is quite exciting, though who knows how
>long it will be before it is fully supported, it could be a decade, ugh!

True. But I've already played around a bit with it. I tried it on track
listings of music CDs. In most browsers it was just a single list, but
FF showed it as a two-column list. Looked good.

It's nothing important, but IMHO a nice-to-have little effect. I even
use the 'text-shadow' property on my headings, although at the moment
Opera 9.5 is the only browser which fully supports it. ;-)

>As always, thanks for your help.

You're welcome.

Micha
Inspiring
October 2, 2008
Thanks Micha,

I've decided to go with the first solution of specifying the width of
the <ul> element and setting a specific width for the <li> too. You are
right, it does leave gaps in between when some lines run longer, but I
don't find it too offensive.

Yes, the column support in CS3 is quite exciting, though who knows how
long it will be before it is fully supported, it could be a decade, ugh!

As always, thanks for your help.

Regards,

Brett
Inspiring
October 2, 2008
.oO(Brett)

>I want to display an unordered list, generated by an array, in two
>columns. How can this be done?
>
>> <ul>
>> <?php
>> // take text field and create array using explode
>> $farray = explode(', ', $row_fieldArray['features']);
>> // loop through the array to process each line
>> foreach ($farray as $value) {
>> // output each line as a <li> element
>> echo "<li> $value </li>"; }
>> ?>
>> </ul>
>
>I thought of enclosing the <ul> in a width constrained div and setting
>the <li> to float left, but I know that shorter length <li> elements
>will cause more bullets per "line" than longer ones.

You could also give each li the same width (for example defined in em)
and then float them, but this might cause new problems and ugly gaps,
dependent on the text length in each li:

o 1st item o 2nd item o 3rd item
with some o 4th item
more text with some
more text
o 5th item o 6th item o 7th item
o 8th item o 9th item

>How can I create a
>two or three column list of bullet points?

Some other ideas:

1) Split the entire list into two or three lists, print them one after
another and use CSS to arrange them side by side. The example from above
could then look like this:

o 1st item o 4th item o 7th item
o 2nd item with some o 8th item
with some more text o 9th item
more text o 5th item
o 3rd item o 6th item

2) Use CSS 3(!) to let the browser automatically render the single list
in multiple columns. Will only work in Gecko-based browsers like Firefox
for now.

Micha