hwg-techniques archives | Jan 2001 | new search | results | previous | next |
Multi-Column Outputby "Kehvan M. Zydhek" <kehvan(at)zydhek.net> |
|
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