Automatic multi-column layout

Discussion in 'HTML' started by David Segall, Oct 5, 2006.

  1. David Segall

    David Segall Guest

    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.
     
    David Segall, Oct 5, 2006
    #1
    1. Advertising

  2. David Segall

    Ben C Guest

    On 2006-10-05, 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. 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.
     
    Ben C, Oct 5, 2006
    #2
    1. Advertising

  3. David Segall

    Andy Dingley Guest

    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>.
     
    Andy Dingley, Oct 5, 2006
    #3
  4. 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?
     
    Harlan Messinger, Oct 5, 2006
    #4
  5. David Segall

    Andy Dingley Guest

    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.
     
    Andy Dingley, Oct 5, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rick Spiewak
    Replies:
    3
    Views:
    3,178
    Rick Spiewak
    Aug 26, 2003
  2. Guest
    Replies:
    1
    Views:
    777
    Guest
    Jun 29, 2004
  3. Replies:
    1
    Views:
    603
    John Timney \(MVP\)
    Jun 19, 2006
  4. Larry R
    Replies:
    1
    Views:
    390
    marss
    Jun 8, 2007
  5. Dave Boland

    Multi-column layout with CSS

    Dave Boland, Sep 18, 2009, in forum: HTML
    Replies:
    19
    Views:
    1,136
    Kevin Scholl
    Sep 22, 2009
Loading...

Share This Page