Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Automatic multi-column layout

Reply
Thread Tools

Automatic multi-column layout

 
 
David Segall
Guest
Posts: n/a
 
      10-05-2006
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.
 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      10-05-2006
On 2006-10-05, David Segall <(E-Mail Removed)> wrote:
> 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.
 
Reply With Quote
 
 
 
 
Andy Dingley
Guest
Posts: n/a
 
      10-05-2006

David Segall wrote:

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

 
Reply With Quote
 
Harlan Messinger
Guest
Posts: n/a
 
      10-05-2006
Andy Dingley wrote:
> David Segall wrote:
>
>> 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?
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      10-05-2006

Harlan Messinger wrote:

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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
Oppinion regarding grid layout vs flow layout NWx ASP .Net 4 02-19-2004 08:56 PM
Converting from grid layout to flow layout. RobertH ASP .Net 1 11-04-2003 12:43 AM
DataList inside a Grid Layout Panel (<DIV>) item layout problem Rick Spiewak ASP .Net 3 08-26-2003 04:22 AM



Advertisments