Multi-Column Output

Greetings,

I am experimenting with an idea for one of my websites. I would like to
create a multi-column layout that is fully dynamic. Specifically, I want to
be able to produce a page that has two or three columns of text (based on
viewable width), with the text in the second (and third) columns flowing
from the bottom of the previous column. The text that will be displayed is
dynamic -- loaded from a database and subject to frequent changing as
opposed to being "hard-coded" in the page (this would actually be a template
to display a number of assorted pages of text). Graphics may also be
included with the text in the future. Ideally, this would also incorporate
some browser-window height detection so the columns would only be as high as
the current viewable portion of the browser window. Any text that displays
beyond the third column would start over again in the first column, but on
the second "page" (page here defined as viewable panes delimited by
scrolling, not actually loading a second page).

What I am trying to visualize would look something like this (display
on-page would be WITHOUT the Column IDs, of course; the sample is best
viewed with monospace fonts rather than variable-width fonts):

COLUMN 1                COLUMN 2               COLUMN 3
Here is some text.      column it wraps up     columns until the
It is wrapping based    to the top of the      page is completed
on the width of the     next column. This      and all the text is
current column. At      pattern continues      displayed. If there
the bottom of the       through all available  is more text than

COLUMN 1b               COLUMN 2b              COLUMN 3b
can be displayed on     columns lower on
the browser screen      the page, access-
at one time, the        able via the scroll-
remaining text is       bars.
placed in additional

I can picture this working (somehow) using CSS DIVs and the advanced
properties within this tag. It only needs to work in advanced browsers (MSIE
5.x, Netscape 6, Mozilla/Gecko-based, Opera 5.x). Older browsers would get
the same text, but without the advanced layout techniques, much as they
currently get (remember, this text is pulled from a database and would
contain only rudimentary formatting commands, such as BOLD, ITALICS, and
maybe COLOR CODES so it can work in most all browsers). The trick is that
the text MUST be read from a database (it absolutely CANNOT be stored on the
page itself), overflow must wrap properly in the advanced browsers, and the
height of each set of columns cannot exceed the viewable height of the
browser window. The older browsers would wind up with a block of text that
stretches the available width of their window without columns, so inline
column breaks in the text are not feasable.

I've considered using tables, but all my attempts fail due to tables
stretching out to show everything inserted in each cell, as best as they
can. Therefore, tables do not seem to be the answer. I've tried some
rudimentary tests with CSS DIVs and have gotten some promising results, but
haven't quite figured out how to make each DIV link to each other for
text-flowing purposes. As described above, specifically coding each segment
of the text to display in each DIV Column is not feasable, as it would
likely result in the visitor having to scroll up and down multiple times
(for those with low res monitors) or would have a somewhat confusing
multi-column, multi-row layout that would make reading text even harder than
long continuous lines (for those on high res monitors). Column height MUST
be dynamic, and each column MUST flow the excess text from the previous
column into it.

While not required, it would also be nice to make the final set of
columns -- those at the end of the data stream -- be "balanced" so that an
uneven display such as that in my example is avoided.

While I can't think of any sites off-hand that do this, I also can't think
of any reason why this couldn't be done (it's been done in word processors
and text-layout programs for years). Of course, my idea my also be a little
more advanced than even the latest CSS specs allow for, so it might not be
possible. I would greatly appreciate any insight and feedback you all might
have. I will naturally give credit on the site to any designer or designers
who manage to accomplish this design challenge.

Please feel free to contact me off-list at kehvan(at)zydhek.net or respond to
the list as a whole with any ideas or suggestions. NOTE: The site in
question is hosted on NT servers, so ASP solutions (if required) are very
much feasable. CGI/Perl can also work, but I am less familiar with that
programming technique/language, so it would be harder for me to adjust to
match the site. JavaScript is also an option (if required) but I would like
to avoid Java Applets, as I want the site to be able to load quickly with a
minimum of additional downloads. FLASH can also be considered, but I know
little if anything about FLASH, and would like to avoid using it if I can
(at this time, at least).

Thanks,
Kehvan M. Zydhek

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA