Two Columns List

shapper

unread,

Jun 29, 2009, 9:24:28 AM6/29/09

to

Hello,

I have the following list:

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

Adrienne Boswell

unread,

Jun 29, 2009, 1:34:47 PM6/29/09

to

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

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

dorayme

unread,

Jun 29, 2009, 7:11:01 PM6/29/09

to

In article
<091cf424-41c0-4e26...@h11g2000yqb.googlegroups.com>,
shapper <mdm...@gmail.com> wrote:

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

--
dorayme

Jukka K. Korpela

unread,

Jun 30, 2009, 1:30:44 PM6/30/09

to

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/

jeff

unread,

Jun 30, 2009, 3:06:42 PM6/30/09

to

Jukka K. Korpela 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).

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

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 can alternate items, if you wish. Since this uses inline-block it
will not work in IE6, not sure about IE7 and 8. Two lists probably makes
more sense.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

.list1{
width: 800px;
}

li{
display: inline-block;
width: 300px;
}

</style>

jeff
>

dorayme

unread,

Jun 30, 2009, 9:39:59 PM6/30/09

to

In article <iZr2m.18865$vi5....@uutiset.elisa.fi>,

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

Jukka K. Korpela

unread,

Jul 1, 2009, 1:52:26 PM7/1/09

to

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/

BootNic

unread,

Jul 1, 2009, 2:38:11 PM7/1/09

to

On Tue, 30 Jun 2009 15:06:42 -0400
jeff <jeff_...@att.net> wrote:

> Jukka K. Korpela wrote:

[snip]

>> (I don't have any CSS answer. I would probably consider using
>> JavaScript that splits the list.)
>
> You can alternate items, if you wish. Since this uses
> inline-block it will not work in IE6, not sure about IE7 and 8.
> Two lists probably makes more sense.

In IE 6 & 7 to get a inline-block like effect on block elements one
could set display to inline and add zoom 1.

> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
>
> <style type="text/css">
>
> .list1{
> width: 800px;
> }
>
>
> li{

display:-moz-inline-box; /* seamonkey & older mozilla support */

> display: inline-block;
> width: 300px;
> }
>
> </style>

> <div class="list1">
> <ul>

[snip]

> </ul>
> </div>

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

--
BootNic Wed Jul 1, 2009 02:38 pm
Good communication is as stimulating as black coffee and just as
hard to sleep after.
*Anne Morrow Lindbergh*

signature.asc

dorayme

unread,

Jul 1, 2009, 7:41:42 PM7/1/09

to

In article <20090701143...@bootnic.eternal-september.org>,
BootNic <bootnic...@gmail.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

BootNic

unread,

Jul 1, 2009, 7:52:53 PM7/1/09

to

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*

signature.asc

jeff

unread,

Jul 1, 2009, 8:49:01 PM7/1/09

to

BootNic wrote:
> On Tue, 30 Jun 2009 15:06:42 -0400
> jeff <jeff_...@att.net> wrote:
>
>> Jukka K. Korpela wrote:
>
> [snip]
>
>>> (I don't have any CSS answer. I would probably consider using
>>> JavaScript that splits the list.)
>> You can alternate items, if you wish. Since this uses
>> inline-block it will not work in IE6, not sure about IE7 and 8.
>> Two lists probably makes more sense.
>
> In IE 6 & 7 to get a inline-block like effect on block elements one
> could set display to inline and add zoom 1.

Thanks, duly noted and socked away in my bag of tricks.

Jeff

jeff

unread,

Jul 1, 2009, 11:35:02 PM7/1/09

to

BootNic wrote:
<snip>

As it so happens I'm working on server generated lists of links that
number well over 100. Clearly you can't do that in one list. I've found
the best way to show this is side by side lists and because you really
don't want to scroll down to read a whole list, rows of columns of lists.

If you did this with floats and one list was longer the next row of
lists would catch on that list. If you did this with tables you'd have
to limit the number of columns because you don't know the page width.
Perfect for display: inline-block with BootNic's "fixes":

An example similar to the OPs request:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

#wrapper{
width: 330px;
border: 1px solid black;

}

.data_list{
width: 100px;
margin: 0 0 20px 0;
padding: 0;
display:-moz-inline-box;
display: inline-block;
list-style: none;
vertical-align: top;
}

.data_list li{
padding-left: 1em;
text-indent: -1em;
}

</style>

<!--[if lt IE 8]>
<style type="text/css">
.data_list{

display:inline;
zoom:1;
}
</style>
<![endif]-->

<div id="wrapper">
<ul class="data_list">
<li>item</li>
<li>list item that wraps</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

<ul class="data_list">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li><a href="">list item that wraps</a></li>
<li>list item that wraps</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

Thanks!

Jeff

shapper

unread,

Jul 4, 2009, 11:12:19 AM7/4/09

to

Hello,

I have been reading your suggestions.
Basically I am trying to create a image gallery where each product
contains an image, a description and a link to a PDF file.

My idea was to be able to have 2 to 4 columns. A pure CSS option would
be great ...
... However after trying many options I think maybe a table would be
better and having it created on the server is maybe the better option.

When using a list I have the following:

CSS:

ol.Catalogue {width: 840px;}

ol.Catalogue li {
float: left;
height: 210px;
width: 210px;
}

ol.Catalogue li div.Product {
background-color: #BBB7AE;
text-align: center;
width: 190px;
}

ol.Catalogue li div.Product img {
padding: 20px;
width: 120px;
}

ol.Catalogue li div.Product p {}

HTML (I post only to items just as an example):

<ol class="Catalogue">
<li>
<div class="Product">
<img src="Contents/Engine/Product/7788f784-e5f4-468e-
a389-b81218be3dd0.jpg" alt="Cartucho+4H"/>
<p>Cartucho 4H</p>
<p><a class="Pdf" href="/Product/Download/
a6002401-1ff6-4ed7-95eb-2525eaf57f05">Brochura</a></p>
</div>
</li>
<li>
<div class="Product">
<img src="Contents/Engine/Product/3fc9ceba-0eed-4b2f-
a4e9-9642a97ab100.jpg" alt="Cartucho+4C"/>
<p>Cartucho 4C</p>
<p><a class="Pdf" href="/Product/Download/d2e29cd6-
c9d9-4519-89ef-0c35b5ce3a5d">Brochura</a></p>
</div>
</li>
</ol>

This is not working very well. I might be going for a table with equal
width columns.
The problem I see is with height ... But I will give it a try

jeff

unread,

Jul 7, 2009, 9:26:35 PM7/7/09

to

Ditch the ordered list. If you need the numbering just have the
server generate the sequence:

Styles shown inline

<div style="float: left; width: 210px; height: taller than highest block">
<div>server generated number</div>
<img src="...">
<p>...</p>
<p></p>

</div>

or preferably inline with conditional comments

<!--[if lt IE 8]>
<style type="text/css">

.inline_block{

display:inline;
zoom:1;
}
</style>
<![endif]-->

<div class="inline_block" style="width: 210px">
<div>server generates number</div>
<img src="...">
<p>...</p>
<p>...</p>

</div>

or you can do this all with spans and forget the conditional comments, I
did that here (not yet live):

http://interstatesupply.com/shop.php?shop=view_category&category=CHEMICAL+DEFENSE

The 3 main columns are floats though.

I really prefer to use inline-block these days so I don't have to
specify a height or generate a clear: both break using a modulus. Unsure
whether I'll go with the conditional comments or spans. The last bit I
did used conditional comments and I may trend that way.

Jeff