473,327 Members | 1,952 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

flow text into two columns

suppose i have a list of things

<P>* 20050108 </p>
<p>* 20050120 </p>
<p>* 20050116 </p>
<p>* 20050119 </p>
....
....

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
16 53691
*Xah Lee* <xa*@xahlee.org>:

suppose i have a list of things

<P>* 20050108 </p>
<p>* 20050120 </p>
<p>* 20050116 </p>
<p>* 20050119 </p>
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


Xah Lee wrote:
suppose i have a list of things
<P>* 20050108 </p>
<p>* 20050120 </p>
<p>* 20050116 </p>
<p>* 20050119 </p>
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
No i don't mean <li>...

I mean a list of <p>short things</p> or even <p>one long paragraph</p>,
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
Xah Lee wrote:
No i don't mean <li>...

<snip>

Same principle with <p>'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'>
<p class='pcols'>* 20050108 </p>
<p class='pcols'>* 20050120 </p>
<p class='pcols'>* 20050116 </p>
<p class='pcols'>* 20050119 </p>
<p class='pcols'>* 20050108 </p>
<p class='pcols'>* 20050120 </p>
<p class='pcols'>* 20050116 </p>
<p class='pcols'>* 20050119 </p>
<p class='pcols'>* 20050108 </p>
<p class='pcols'>* 20050120 </p>
<p class='pcols'>* 20050116 </p>
<p class='pcols'>* 20050119 </p>
<p class='pcols'>* 20050108 </p>
<p class='pcols'>* 20050120 </p>
<p class='pcols'>* 20050116 </p>
<p class='pcols'>* 20050119 </p>
<p class='pcols'>* 20050108 </p>
<p class='pcols'>* 20050120 </p>
<p class='pcols'>* 20050116 </p>
<p class='pcols'>* 20050119 </p>
<p class='pcols'>* 20050108 </p>
<p class='pcols'>* 20050120 </p>
<p class='pcols'>* 20050116 </p>
<p class='pcols'>* 20050119 </p>
<p class='pcols'>* 20050108 </p>
<p class='pcols'>* 20050120 </p>
<p class='pcols'>* 20050116 </p>
<p class='pcols'>* 20050119 </p>
<p class='pcols'>* 20050108 </p>
<p class='pcols'>* 20050120 </p>
<p class='pcols'>* 20050116 </p>
<p class='pcols'>* 20050119 </p>
</div>
</body>
</html>
Jul 21 '05 #5
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
*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
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
Xah Lee wrote:
suppose i have a list of things

<P>* 20050108 </p>
<p>* 20050120 </p>
<p>* 20050116 </p>
<p>* 20050119 </p>
...
...

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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Robert Bowen | last post by:
Hello all. I have been given mock-ups (in static HTML) of some pages for a site I am working on. The client would like these pages to look exactly as they do now. The problem is that the content is...
3
by: Rennie deGraaf | last post by:
I'm working on this page (http://pages.cpsc.ucalgary.ca/~degraaf/test/test.html). In the central (green-bordered) area, I want a bunch of (red-bordered) blocks each containing a thumbnail image...
0
by: Amos | last post by:
I have the following tables: table GROUPS: ID_GROUP (Contatore) (CP - chiave primaria) GROUP (Testo) DESCRIPTION (Testo) table ACCOUNTS: ID_ACCOUNT (Counter) (PK) ID_GROUP (Number) (EK -...
2
by: Marcos MOS | last post by:
Hi, I have a page (.aspx) with a DataList. Into it there is a DataGrid... (master/detail). I wanna my DataList repeat 2 columns in RepeatLayout = Flow format. But when I put RepeatColumns=2...
5
by: Kat | last post by:
Hi, I'm trying to set up an asp.net page using flow layout so I'm putting all my controls into a table grid, etc. I use several radiobuttonlists and datagrids that are generated from datasource....
2
by: johkar | last post by:
My right column content is created dynamically by an application so it will vary in height. When the main content of the page takes up more vertical space than the rigth column, I want the content...
3
by: borntonetwork | last post by:
I am creating a simple form using designer (qt4) on Ubuntu. I use pyuic to create a python script from the form. I run the script and the form shows up fine. The idiosyncrasy occurs when I try to...
1
by: David Lozzi | last post by:
Howdy, I have a datalist which is displaying a list of categories and their associated sub categories in secondary datalists. Works great in a single column. Unfortunaly when i switch it to...
1
by: empiresolutions | last post by:
Hello, My page when correct should show the HeaderContainer, blow that the ActionContainer which has, 3 column divs, then below that the FooterContainer. It is important that the page build...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.