multiple columns

I have a design template with a three column newspaper like layout
for the content (I just implement these, I don't dream them up!).

Hence, text and images flow down the first column and then swith to
the second and finally to the third. Content is server generated.

I don't think there is an html/css way to do that that is reasonably
supported. Am I wrong?

So perhaps:

..column{float: left; width: 30%; margin-left: 3%}

Perhaps words could be counted and content poured roughly equally in all
columns. Perhaps new columns should occur after the first ". " after a
certain count.

I can see doing that either server side or perhaps clientside where a
single div is read and then poured into three columns. That would still
be readable in non DHTML browsers.

Opinions? Ideas?

Cheers,
Jeff

Jeff Thies schrieb:

I have a design template with a three column newspaper like layout for
the content (I just implement these, I don't dream them up!).

Hence, text and images flow down the first column and then swith to
the second and finally to the third. Content is server generated.

I don't think there is an html/css way to do that that is reasonably
supported. Am I wrong?

Of course you're wrong! Use the wonderful <multicol> element and tell
your visitors "Best viewed with Netscape 4".
:-)

I can see doing that either server side or perhaps clientside where a
single div is read and then poured into three columns. That would
still be readable in non DHTML browsers.

The IHT dreamed up such a scheme, an example is e.g. this article here:
<http://www.iht.com/articles/2004/11/04/america/web.bushconftext.html>
(no, don't read the text; it's crap!). This is actually quite nicely
done and easy to read, IMHO. If you scroll all the way down, you'll also
see that you can change the layout from three columns to one column. The
only blooper, but a *major* one: The text is completely invisible if
javascript is diabled but CSS is still active. That's because they set
all divs to visibility:hidden and then manipulate visibility with
javascript. Very, very stupid - but of course you don't have to do that
too.



Matthias
--
http://blog.ch/

brucie schrieb:

In alt.html Matthias Gutfeldt said:


The IHT dreamed up such a scheme, an example is e.g. this article here:
http://www.iht.com/articles/2004/11/...hconftext.html
(no, don't read the text; it's crap!). This is actually quite nicely
done and easy to read, IMHO.


i assume you mean except for the horizontal scrolling backwards and
forwards to read it.

No horizontal scrolling on my screen (1024x768). Perhaps I was just
lucky to fit into their "best viewed with" screen resoluion?


Matthias
--
http://blog.ch/

On Thu, 04 Nov 2004 23:02:11 +0100, Matthias Gutfeldt
<say-no-to-spam (AT) gmx (DOT) net> wrote:

The IHT dreamed up such a scheme, an example is e.g. this article here:
http://www.iht.com/articles/2004/11/...hconftext.html
(no, don't read the text; it's crap!). This is actually quite nicely
done and easy to read, IMHO. If you scroll all the way down, you'll also
see that you can change the layout from three columns to one column. The
only blooper, but a *major* one: The text is completely invisible if
javascript is diabled but CSS is still active. That's because they set
all divs to visibility:hidden and then manipulate visibility with
javascript. Very, very stupid - but of course you don't have to do that
too.

"JS off, CSS on" is, as you say, a problem, also a problem is "JS on,
CSS off" (okay a much rarer situation but a possible one) - here the
entire text of the page appears three times. This is because the
multiple columns are created by duplicating the entire text and the
positioning the duplicates inside clipped regions to create the
columns.

Additionally the line counting used to work out the positioning
requires pixel exactness in the line heights - hence pixel sized (and
thus non-resizable in IE) font sizes. Using Gecko it's quite possible
to change the font size and lose some of the text entirely.

I admire the cleverness in this JavaScript driven effect but think
that overall it's a usability and acessibility minefield.

Steve

Matthias Gutfeldt wrote:

Jeff Thies schrieb:

I have a design template with a three column newspaper like layout for
the content (I just implement these, I don't dream them up!).

Hence, text and images flow down the first column and then swith to
the second and finally to the third. Content is server generated.

I don't think there is an html/css way to do that that is reasonably
supported. Am I wrong?

Of course you're wrong! Use the wonderful <multicol> element and tell
your visitors "Best viewed with Netscape 4".
:-)


I can see doing that either server side or perhaps clientside where a
single div is read and then poured into three columns. That would
still be readable in non DHTML browsers.

The IHT dreamed up such a scheme, an example is e.g. this article here:
http://www.iht.com/articles/2004/11/...hconftext.html

AFICS, the only advantage for multi-column is for short-ish articles on wide
monitors, so all the text sits above the fold without using long lines.

Shame the IHT is fixed width, if it were fluid it'd be useful for quick
articles..

kchayka wrote:

Jim Higson wrote:

AFICS, the only advantage for multi-column is for short-ish articles on wide
monitors, so all the text sits above the fold without using long lines.


Actually, I don't think it's suitable for screen display at all,
since
there is no way to determine whether the viewport will be large enough
to contain the entire article. If the viewport is too small, scrolling
can become a real usability problem with these things.

Since this is all client side, they know the viewport width. And if
javascript is turned off it doesn't work anyways!

Jeff

Multi-columns are, however, an OK idea for a print stylesheet.

kchayka wrote:

Jim Higson wrote:

AFICS, the only advantage for multi-column is for short-ish articles
on wide
monitors, so all the text sits above the fold without using long lines.

Actually, I don't think it's suitable for screen display at all, since
there is no way to determine whether the viewport will be large enough
to contain the entire article. If the viewport is too small, scrolling
can become a real usability problem with these things.

Multi-columns are, however, an OK idea for a print stylesheet.

I think this looks good, the narrow columns make it very readable:

http://www.iht.com/articles/2004/11/04/news/neocon.html

Mike