flow text into two columns

Xah Lee

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:

<table><tr><td>
....
</td>
<td>
....
</td>
</tr></table>

Thanks.

Xah
xa*@xahlee.org
http://xahlee.org/PageTwo_dir/more.html

Jul 21 '05 #1

Follow Post Reply

53555

Christoph Paeper

*Xah Lee* <xa*@xahlee.org>:

suppose i have a list of things

* 20050108 
* 20050120 
* 20050116 
* 20050119 
You mean

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

'float': <http://webdesign.crissov.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)

Jul 21 '05 #2

mscir

Xah Lee wrote:

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

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.dtd">
<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='colwrapper'>
<ul class="twocol">
<li>Papaya</li>
<li>Mango</li>
<li>Banana banana banana banana banana</li>
<li>Pineapple</li>
<li>Cantaloupe</li>
<li>Watermelon</li>
<li>Apricot</li>
<li>Pear</li>
<li>Pineapple</li>
<li>Cantaloupe</li>
<li>Watermelon</li>
<li>Apricot</li>
<li>Pear</li>
<li>Pineapple</li>
<li>Cantaloupe</li>
<li>Watermelon</li>
<li>Apricot</li>
<li>Pear</li>
<li>Pear</li>
<li>Pineapple</li>
<li>Cantaloupe</li>
<li>Watermelon</li>
<li>Apricot</li>
<li>Pear</li>
</ul>
</div>
</body>
</html>

Jul 21 '05 #3

Xah Lee

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
xa*@xahlee.org
http://xahlee.org/PageTwo_dir/more.html

Jul 21 '05 #4

mscir

Xah Lee wrote:

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

<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.dtd">
<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='colwrapper'>
* 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>

Jul 21 '05 #5

Xah Lee

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.
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
xa*@xahlee.org
http://xahlee.org/PageTwo_dir/more.html

Jul 21 '05 #6

Christoph Paeper

*Xah Lee* <xa*@xahlee.org>:

No i don't mean <li>...
Yes, you do.
I mean a list
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.
and i was hoping for some auto flow into 2 columns,

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

Jul 21 '05 #7

Unknown User

On 7 Feb 2005 19:04:29 -0800, Xah Lee <xa*@xahlee.org> wrote:

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

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

Jul 21 '05 #8

Boris

Xah Lee wrote:

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?

You got some answers already but just for the record:
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

Jul 21 '05 #9

Xah Lee

Boris wrote:

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

That's what i sought!

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

Xah
xa*@xahlee.org
http://xahlee.org/PageTwo_dir/more.html

Jul 21 '05 #10

Markus Ernst

Xah Lee wrote:

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

That's what i sought!

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

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

Jul 21 '05 #11

Lauri Raittila

in comp.infosystems.www.authoring.stylesheets, Markus Ernst wrote:

Xah Lee wrote:
Boris wrote:
http://www.w3.org/TR/css3-multicol/
That's what i sought!

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

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
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.
Mac OS 9.x - it will take at least 15 years until today's modern browsers will
have disappeared.
But that don't mean you can't use some extra decoration earlier.
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
Last one is good idea, as multible colums on screen are not good idea
anyway.
I know these suggestions are against the spirit of CSS, as they mix up
content and presentation. But still CSS implementation is very poor,

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.

Jul 21 '05 #12

Alan J. Flavell

On Thu, 10 Feb 2005, Markus Ernst wrote:

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 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.

Jul 21 '05 #13

kchayka

Lauri Raittila wrote:

> Boris wrote:
>> http://www.w3.org/TR/css3-multicol/

ALso notice, that is multicol will be defined well, it couses no great
harm when used where not supported.

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.

Jul 21 '05 #14

Lauri Raittila

in comp.infosystems.www.authoring.stylesheets, kchayka wrote:

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

I have no opinion on how well defined multicol will be,

I seem to have forgotten "if" from above sentence.
but I still
don't have much confidence this will be used intelligently by the
authoring community.
Well, it is quaranteed to be used bad way. The good idea is that it is
CSS, so you can easily turn it off...
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.

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.

Jul 21 '05 #15

Christoph Paeper

*Markus Ernst* <derernst@NO#SP#AMgmx.ch>:

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)

That, of course, would also be possible with client-side scripting.

--
Useless Facts #14:
There are 102,981,500 ways to combine six of the 8-studed LEGO bricks of one
color.
Since 1949, the LEGO company, based in Denmark, has produced more than
200,000,000,000 of the plastic elements that make up the Lego System.

Jul 21 '05 #16

Unknown User

I design with the latest 2.1 CSS. I use the @import to display nicely on
modern browsers and to remove the style sheet on old browsers.
It looks unformated in Netscape 4, but I don't care. Their users are used
to it, and the most important thing is that the site be usable.
On Thu, 10 Feb 2005 12:45:03 +0100, Markus Ernst <derernst@NO#SP#AMgmx.ch>
wrote:

Xah Lee wrote:
Boris wrote:
http://www.w3.org/TR/css3-multicol/

That's what i sought!

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

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.

--
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

Jul 21 '05 #17

flow text into two columns

This discussion thread is closed

Similar topics