flow text into two columns

**Christoph Paeper** · Jul 21 '05, 01:04 AM

Re: flow text into two columns

*Xah Lee* <xah@xahlee.org >:[color=blue]
>
> suppose i have a list of things
>
> * 20050108 
> * 20050120 
> * 20050116 
> * 20050119 [/color]

You mean

<ul>
<li>20050108</li>
<li>20050120</li>
<li>20050116</li>
<li>20050119</li>
...?
[color=blue]
> is there a way to use css so that it flows into 2 columns?[/color]

'float': <http://webdesign.criss ov.de/temp/multicol-lists>
I think there were some flaws with that solution, but I don't remember
which.

--
"The uglier the truth, the truer the friend that told you."
King Pellinore (Camelot)

**mscir** · Jul 21 '05, 01:04 AM

Re: flow text into two columns

Xah Lee wrote:[color=blue]
> suppose i have a list of things
> * 20050108 
> * 20050120 
> * 20050116 
> * 20050119 
> over a hundred items.
> is there a way to use css so that it flows into 2 columns?
> as opposed to manually hardcode in table:
> Thanks.
> Xah[/color]

How about something like this? Adapted from:

http://www.fu2k.org/alex/css/cssjunk/ListColumns.mhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html>
<head>
<title>Untitled </title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
body{
width: 100%;
}
..colwrapper{
border: 1px solid red;
padding: 0px;
/* margin: 50px; */
width: 50%;
}
li {
float: left;
width: 180px;
margin: 0;
padding: 0;
border: 0;
}
</style>
</head>
<body>
<div class='colwrapp er'>
<ul class="twocol">
<li>Papaya</li>
<li>Mango</li>
<li>Banana banana banana banana banana</li>
<li>Pineapple </li>
<li>Cantaloup e</li>
<li>Watermelo n</li>
<li>Apricot</li>
<li>Pear</li>
<li>Pineapple </li>
<li>Cantaloup e</li>
<li>Watermelo n</li>
<li>Apricot</li>
<li>Pear</li>
<li>Pineapple </li>
<li>Cantaloup e</li>
<li>Watermelo n</li>
<li>Apricot</li>
<li>Pear</li>
<li>Pear</li>
<li>Pineapple </li>
<li>Cantaloup e</li>
<li>Watermelo n</li>
<li>Apricot</li>
<li>Pear</li>
</ul>
</div>
</body>
</html>

**Xah Lee** · Jul 21 '05, 01:04 AM

Re: flow text into two columns

No i don't mean <li>...

I mean a list of short things or even one long paragraph,
and i was hoping for some auto flow into 2 columns, as opposed to
manually creating two class of styles each being a column, and assign
each tag to the right class...

Thanks.

Xah
xah@xahlee.org

http://xahlee.org/PageTwo_dir/more.html

**mscir** · Jul 21 '05, 01:04 AM

Re: flow text into two columns

Xah Lee wrote:
[color=blue]
> No i don't mean <li>...[/color]
<snip>

Same principle with 's, does this work for you?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html>
<head>
<title>Untitled </title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
body{
width: 100%;
}
..colwrapper{
border: 1px solid red;
padding: 0px;
/* margin: 50px; */
width: 50%;
}
..pcols {
float: left;
width: 100px;
margin: 0;
padding: 0;
border: 0;
}
</style>
</head>
<body>
<div class='colwrapp er'>
* 20050108 
* 20050120 
* 20050116 
* 20050119 
* 20050108 
* 20050120 
* 20050116 
* 20050119 
* 20050108 
* 20050120 
* 20050116 
* 20050119 
* 20050108 
* 20050120 
* 20050116 
* 20050119 
* 20050108 
* 20050120 
* 20050116 
* 20050119 
* 20050108 
* 20050120 
* 20050116 
* 20050119 
* 20050108 
* 20050120 
* 20050116 
* 20050119 
* 20050108 
* 20050120 
* 20050116 
* 20050119 
</div>
</body>
</html>

**Xah Lee** · Jul 21 '05, 01:04 AM

Re: flow text into two columns

Thanks. interesting. Though, look like a css isn't desigen to do it.

the css workaround doesn't work for me exactly, as i have other things
after this list.

File Not Found

http://xahlee.org/perl-python/python.html

perhaps some more hack might get it to work... but Table with two
cloumn is much simpler...
the problem with table is that as the items grow, one has to manually
fidget it to justfify them into several columns.

Xah
xah@xahlee.org

http://xahlee.org/PageTwo_dir/more.html

**Christoph Paeper** · Jul 21 '05, 01:04 AM

Re: flow text into two columns

*Xah Lee* <xah@xahlee.org >:[color=blue]
>
> No i don't mean <li>...[/color]

Yes, you do.
[color=blue]
> I mean a list[/color]

Exactly, on <http://xahlee.org/perl-python/python.html> you are just
faking a 'ul', which stands for "unordered list". If you're not using
correct mark-up, it's hard to give good CSS advice.
[color=blue]
> and i was hoping for some auto flow into 2 columns,[/color]

Did you check out the link I gave? It's based on the one "mscir" gave you.

--
"Not all chemicals are bad. Without chemicals such as hydrogen and oxygen,
for example, there would be no way to make water, a vital ingredient in beer."
Dave Barry

**Unknown User** · Jul 21 '05, 01:04 AM

Re: flow text into two columns

On 7 Feb 2005 19:04:29 -0800, Xah Lee <xah@xahlee.org > wrote:
[color=blue]
> http://xahlee.org/perl-python/python.html[/color]

These are not paragraphs, this is a list, you should use <ul>

--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Discover Opera: http://members.surfeu.fi/jerkku/
http://www.auriance.com - http://www.auriance.net

**Boris** · Jul 21 '05, 01:04 AM

Re: flow text into two columns

Xah Lee wrote:[color=blue]
> suppose i have a list of things
>
> * 20050108 
> * 20050120 
> * 20050116 
> * 20050119 
> ...
> ...
>
> over a hundred items.
> is there a way to use css so that it flows into 2 columns?[/color]

You got some answers already but just for the record:

CSS Multi-column Layout Module Level 1

http://www.w3.org/TR/css3-multicol/

However noone knows if we will ever have some kind of control like this in
CSS 3.

Boris

**Xah Lee** · Jul 21 '05, 01:04 AM

Re: flow text into two columns

Boris wrote:[color=blue]
> http://www.w3.org/TR/css3-multicol/[/color]

That's what i sought!

looks like perhaps in a couple of years we'll have it. :(

Xah
xah@xahlee.org

http://xahlee.org/PageTwo_dir/more.html

**Markus Ernst** · Jul 21 '05, 01:04 AM

Re: flow text into two columns

Xah Lee wrote:[color=blue]
> Boris wrote:[color=green]
>> http://www.w3.org/TR/css3-multicol/[/color]
>
> That's what i sought!
>
> looks like perhaps in a couple of years we'll have it. :([/color]

Couple of years?? If you know that even in technologically advanced
Switzerland the biggest ISP still distributed Netscape 4.x with internet
starter kits last year, and that lots of people still use Windows 98 or Mac
OS 9.x - it will take at least 15 years until today's modern browsers will
have disappeared.

So if you want to make 2 columns for more convenient display of your long
list you can:
- hard-code a 2 column layout in HTML
- use a server-side language such as PHP to hard-code it on the fly (for
example output "</td><td>" after half of the list items, or "</tr><tr>"
after every second table cell)
- make a PDF

I know these suggestions are against the spirit of CSS, as they mix up
content and presentation. But still CSS implementation is very poor, and
also CSS does not provide simple solutions for some simple tasks (see thread
"[css] annoying background and body height"), so sometimes we just have to
work around it, and this won't change soon.

--
Markus

**Lauri Raittila** · Jul 21 '05, 01:04 AM

Re: flow text into two columns

in comp.infosystem s.www.authoring.stylesheets, Markus Ernst wrote:[color=blue]
> Xah Lee wrote:[color=green]
> > Boris wrote:[color=darkred]
> >> http://www.w3.org/TR/css3-multicol/[/color]
> >
> > That's what i sought!
> >
> > looks like perhaps in a couple of years we'll have it. :([/color]
>
> Couple of years?? If you know that even in technologically advanced
> Switzerland the biggest ISP still distributed Netscape 4.x with internet
> starter kits last year,[/color]
[color=blue]
> and that lots of people still use Windows 98 or[/color]

That is no problem. I still have 95 in one computer of mine, and it runs
good browsers, and it is more than likely that it is supported longer
than it takes multicol to be implemented.

ALso notice, that is multicol will be defined well, it couses no great
harm when used where not supported.
[color=blue]
> Mac OS 9.x - it will take at least 15 years until today's modern browsers will
> have disappeared.[/color]

But that don't mean you can't use some extra decoration earlier.
[color=blue]
> So if you want to make 2 columns for more convenient display of your long
> list you can:
> - hard-code a 2 column layout in HTML
> - use a server-side language such as PHP to hard-code it on the fly (for
> example output "</td><td>" after half of the list items, or "</tr><tr>"
> after every second table cell)
> - make a PDF[/color]

Last one is good idea, as multible colums on screen are not good idea
anyway.
[color=blue]
> I know these suggestions are against the spirit of CSS, as they mix up
> content and presentation. But still CSS implementation is very poor,[/color]

Not really. I agree that it not perfect, but it is certainly better than
nothing.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

**Alan J. Flavell** · Jul 21 '05, 01:04 AM

Re: flow text into two columns

On Thu, 10 Feb 2005, Markus Ernst wrote:
[color=blue]
> Couple of years?? If you know that even in technologically advanced
> Switzerland the biggest ISP still distributed Netscape 4.x with
> internet starter kits last year, and that lots of people still use
> Windows 98 or Mac OS 9.x - it will take at least 15 years until
> today's modern browsers will have disappeared.[/color]

So they don't show the content like a modern browser would show it;
but it can still be designed for graceful fallback so that they get
complete access to the content, even though the cosmetics may be
different.

Thanks to the way the web markups are designed, we don't have to
proceed at the pace of the slowest.

**kchayka** · Jul 21 '05, 01:04 AM

Re: flow text into two columns

Lauri Raittila wrote:[color=blue]
>[color=green][color=darkred]
>> > Boris wrote:
>> >> http://www.w3.org/TR/css3-multicol/[/color][/color]
>
> ALso notice, that is multicol will be defined well, it couses no great
> harm when used where not supported.[/color]

I have no opinion on how well defined multicol will be, but I still
don't have much confidence this will be used intelligently by the
authoring community. Stuff like this causes me some concern:

"the UA determines the height of the columns based on the content which
needs to be fitted"

What is the UA going to do when the content cannot fit within the
viewport? There's no accounting for viewport size on screen, or paper
size for printing. Nobody seems to consider this much, but it has the
potential for real usability problems. IMO.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

**Lauri Raittila** · Jul 21 '05, 01:05 AM

Re: flow text into two columns

in comp.infosystem s.www.authoring.stylesheets, kchayka wrote:[color=blue]
> Lauri Raittila wrote:[color=green]
> >[color=darkred]
> >> > Boris wrote:
> >> >> http://www.w3.org/TR/css3-multicol/[/color]
> >
> > ALso notice, that is multicol will be defined well, it couses no great
> > harm when used where not supported.[/color]
>
> I have no opinion on how well defined multicol will be,[/color]

I seem to have forgotten "if" from above sentence.
[color=blue]
> but I still
> don't have much confidence this will be used intelligently by the
> authoring community.[/color]

Well, it is quaranteed to be used bad way. The good idea is that it is
CSS, so you can easily turn it off...
[color=blue]
> Stuff like this causes me some concern:
>
> "the UA determines the height of the columns based on the content which
> needs to be fitted"
>
> What is the UA going to do when the content cannot fit within the
> viewport? There's no accounting for viewport size on screen, or paper
> size for printing. Nobody seems to consider this much, but it has the
> potential for real usability problems. IMO.[/color]

No comment. Haven't actually even read the multicol doc yet.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

flow text into two columns

flow text into two columns

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment