The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Multi-column layout for print that works with content-fill: auto

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #275375

    I want to do a multi-column layout that prints nicely (on Chrome at least) and uses the column-fill rule of ‘auto’, so that content first fills up 1 column until the end of a print page and only after that goes to next column (instead of default where content is balanced on both columns).

    Basically this:

    A C
    B D

    Where the separation marks the separation between print pages. Note that E F stay in the same column instead of being in 2 different columns, that’s column-fill work.

    Content is a list of <p> that have dynamic heights and dynamic number of rows (this is like a report with the name of all users of the system). I don’t want control over where the page break occurs, only that it flows the content as specified.

    If I use a multi-column layout by default I get

    A C
    B D
    E F

    which looks very weird in my use case. Activating column-fill auto requires setting an height value but if I use height: 100% then the multi-column stops overflowing to the next print page and overflows to ‘the right’ so effectively content is cut off.

    I read both CSS Multi-column ( and CSS Paged Media Module ( and it seems this basically isn’t supported but maybe I’m missing some hack on how to achieve this.

    Some wacky ideas for brainstorming:

    • is there any other way to do columns dynamically to achieve the flow I wanted?
    • at the worst case is there any way in JS to know when do a column content reaches the end of the page and do a manual column or page break? (this can solve the overflow problem of going to the right)

    • is it possible in JS to know how many print pages does my content require? they are not always same height.

    I just wanted to get some feedback or is this something that the CSS Specs should improve upon?

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.