Two Columns List

Hello,

I have the following list:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<ol>

What is the best way to display the list items in two columns?
I need the list to be 600 px and the width divided equally by the two
columns.

Thank You,
Miguel

Gazing into my crystal ball I observed shapper <mdmoura (AT) gmail (DOT) com>
writing in news:091cf424-41c0-4e26-a145-2014f7b34c32
@h11g2000yqb.googlegroups.com:

Hello,

I have the following list:

ol
li>Item 1</li
li>Item 2</li
li>Item 3</li
li>Item 4</li
li>Item 5</li
ol

What is the best way to display the list items in two columns?
I need the list to be 600 px and the width divided equally by the two
columns.

Thank You,
Miguel

You realize that ol element automatically numbers content (ordered list),
so the list will render as
1. Item 1
2. Item 2
3. Item 3 ...

Why does the list have to be 600px? What if I am viewing the list on a
small device?

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

In article
<091cf424-41c0-4e26-a145-2014f7b34c32 (AT) h11g2000yqb (DOT) googlegroups.com>,
shapper <mdmoura (AT) gmail (DOT) com> wrote:

Hello,

I have the following list:

ol
li>Item 1</li
li>Item 2</li
li>Item 3</li
li>Item 4</li
li>Item 5</li
ol

What is the best way to display the list items in two columns?
I need the list to be 600 px and the width divided equally by the two
columns.

<http://dorayme.netweaver.com.au/lists/listsSideBySide.html>

--
dorayme

dorayme wrote:

What is the best way to display the list items in two columns?
I need the list to be 600 px and the width divided equally by the two
columns.

http://dorayme.netweaver.com.au/lists/listsSideBySide.html

I'm underwhelmed: on my IE 8 and well as on FF3, both columns are 600px, for
a total of 1200px. Was that how you interpreted the question?

Halving the numbers, I seem to get the desired effect.

However, the markup contains two lists, not one. If you can change the
markup that way, it's such an easy job (and you could even do without CSS,
using just good old layout table). If effect, you're putting two elements
side by side. It's coincidental that the elements happen to be list - but I
think the question was specifically about styling _one_ list.

(I don't have any CSS answer. I would probably consider using JavaScript
that splits the list.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/

In article <iZr2m.18865$vi5.9336 (AT) uutiset (DOT) elisa.fi>,
"Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> wrote:

dorayme wrote:

What is the best way to display the list items in two columns?
I need the list to be 600 px and the width divided equally by the two
columns.

http://dorayme.netweaver.com.au/lists/listsSideBySide.html

I'm underwhelmed: on my IE 8 and well as on FF3, both columns are 600px, for
a total of 1200px. Was that how you interpreted the question?

Halving the numbers, I seem to get the desired effect.

However, the markup contains two lists, not one. If you can change the
markup that way, it's such an easy job (and you could even do without CSS,
using just good old layout table). If effect, you're putting two elements
side by side. It's coincidental that the elements happen to be list - but I
think the question was specifically about styling _one_ list.

(I don't have any CSS answer. I would probably consider using JavaScript
that splits the list.)

You are perfectly right about all this. And there I was thinking how
generous I was not to mention how stupid it would be to have a wrapper
so big, and all widths in pixels! And, all along, this was a figment of
my absent mind. I have changed the above to keep it for when someone
asks a more elementary question and yes I will try remember to say it is
probably best not to width in pixels. <g>

As for one list that splits into two columns, that is perhaps a
variation of the occasionally expressed desire to have the flow from one
col to the next in a browser. That would indeed be a rather nice thing
to be able to design in HTML and CSS.

Anyway, back to the OP's problem. I now say, hopefully stumbling to
lesser mistakes:

<http://dorayme.netweaver.com.au/lists/listsSideBySide1.html>

Using the deprecated value="", using two lists to stand in for one. (I
use the Transitional doctype but probably in a real use, better have it
Strict and allow this "value" to make validators object. Not a big deal.)

From the visual user's point of view, there is no loss of meaning for
browsers that still support the deprecation. I am merely looking at
Safari and FF for now. As for how it would go in a non-visual rendering,
perhaps someone can tell me. The context may well make it a trivial
thing to understand that this second list is a continuation of the first.

To be more exactly semantic, few will like what I am to say now, a table
might be best to hold the two OLs together instead of floated DIVs *not*
for mere layout but because an ordered list can be represented by a
table.

The relation between the two lists is that one is meant to follow the
other in a higher ordered list way (the latter phrase of three words
being intended in the normal English meaning rather the technical
meaning of OL). Thus the table meaning is to order the lists themselves,
the one on the left or first being importantly on the left or first...

Usually, the cells in a column would carry the order in the examples I
used to give in the argument that a table happily substitutes for an
ordered list. But in this case, it would be the table headings in the
top row.

--
dorayme

jeff wrote:

Whats with tables on this? float: left with a width works fine.

If you actually try it, you'll see that floats and lists require more
attention than simple table layout. And what you _really_ want here is
tabular appearance. Since you can't, due to CSS limitations, is a simple
HTML table really worse than illogical use of floating (since you're really
just simulating tabularity)?

You can alternate items, if you wish. Since this uses inline-block
it will not work in IE6, not sure about IE7 and 8.

Alternate? You're just turning list items into inline blocks. Works on IE 8.
Most probably not IE 6. Probably not on IE 7 either, which has limited
inline-block support.

So it's not something you should use in authoring for the WWW, especially if
there's a different approach that works much more widely.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

In article <20090701143811.296558fc (AT) bootnic (DOT) eternal-september.org>,
BootNic <bootnic.bounce (AT) gmail (DOT) com> wrote:

I see no need in this example to wrap the ul in a div, class could be
directly applied to ul.

In the case of ULs and OLs, it is trickier to set the CSS without DIVs
(the reason I used DIVS in my example earlier in thread) because the
margins and paddings differe rather among browsers and all are sensitive
re the showing of bullets and numbers... Not that it can't be done at
all.

--
dorayme

On Thu, 02 Jul 2009 09:41:42 +1000
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <20090701143811.296558fc (AT) bootnic (DOT) eternal-september.org>,
BootNic <bootnic.bounce (AT) gmail (DOT) com> wrote:

I see no need in this example to wrap the ul in a div, class
could be directly applied to ul.

In the case of ULs and OLs, it is trickier to set the CSS
without DIVs (the reason I used DIVS in my example earlier in
thread) because the margins and paddings differe rather among
browsers and all are sensitive re the showing of bullets and
numbers... Not that it can't be done at all.

In this case when trying to display as inline-block there will be no
list-style as the li elements are not displayed as list-item. Margins
and padding should be adjusted accordingly for ul/ol and li elements
and for an extra measure list-style may be set to none.



--
BootNic Wed Jul 1, 2009 07:52 pm
Nothing is stronger than habit.
*Ovid*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.11 (GNU/Linux)

iEYEARECAAYFAkpL9tgACgkQmo2774GZ7qlV6QCgq7If3airaF JbGBpNVoIzJ932
k/YAn0ZmHssuPbl5s5Y5CwkThi9ALgZx
=ITMw
-----END PGP SIGNATURE-----