Automatic multi-column layout

[David Segall]

To cater for the increasingly drastic variation in screen widths I
decided to follow the usual printed page solution and display the text
in columns. I found the <multicol> tag but it only works in Netscape.
How can I get text to flow between a fixed number of columns? For (a
lot of) extra credit, how can I make the number of columns depend on
the actual displayed width? I have no objection to using Javascript or
even some simple server side processing.

 

[Ben C]

To cater for the increasingly drastic variation in screen widths I
decided to follow the usual printed page solution and display the text
in columns. I found the <multicol> tag but it only works in Netscape.
How can I get text to flow between a fixed number of columns?

You can use a series of left floats with usually percentage widths on
them, or a table, or absolute positioning.

For (a lot of) extra credit, how can I make the number of columns
depend on the actual displayed width? I have no objection to using
Javascript or even some simple server side processing.

You can use document.getComputedStyle() to get the width (and height) of
the container and then write a bit of JS to change the number of table
cells or floats.

A harder problem though is that whichever approach you use, you will
have to break the text up into columns yourself.

i.e.

<div class="col1">
blah blah
</div>
<div class="col2">
blah blah
</div>

The structure here defines where column 1 ends and column 2 starts.
Ideally you'd like the text to flow into column 2 automatically when
there isn't enough height left in column 1. Especially if you're using
dynamically-determined column widths-- you don't want a very long column
1 that scrolls off the bottom of the page and then only a few lines in
column 2.

CSS simply doesn't do column layout, maybe a future version will.

 

[Andy Dingley]

To cater for the increasingly drastic variation in screen widths I
decided to follow the usual printed page solution and display the text
in columns.

HTML doesn't support this "newspaper style" column flow model.

Not unreasonably, IMHO. HTML is largely a screen format, and it assumes
certain things about screens such as them "typically" being only wide
enough for a single line of text and that single-axis scrolling is
easier to manage than multi-axis scrolling. Although HTML does have
lots of non-screen behaviours too, these two constraints are pretty
fundamental to it. If we accept them, then mutli-column newspaper style
columns aren't a good idea.

If you really want it, do it with XSL:FO (which does support it)

If you want it in HTML, then you have to set your own explicit column
breaks, which IMHO is throwing away most of the point of having it,
certainly as regards good fluid design. You could even do this
automatically, from XSL:FO. Sticking floated <div>s side by side works,
as would using a <table>.

 

[Harlan Messinger]

To cater for the increasingly drastic variation in screen widths I
decided to follow the usual printed page solution and display the text
in columns.

[...]
If you really want it, do it with XSL:FO (which does support it)

But what browser supports XSL:FO?

 

[Andy Dingley]

But what browser supports XSL:FO?

Natively? - not many (although it's an easy Java applet to write, I
did one years ago when I had a lot of XSL:FO to preview and proof-read)

What you could do though is make it into XSL:FO, then render that into
HTML. This would also be the point at which you instantiated the fixed
column breaks and thus implied an assumed window height. It's not good,
but it works.