Forum How do I...?

Choosing the right top-level HTML layout strategy flex? table? grid? positioning?

johnathonwright
I'm working on figuring out whether to use a table, a grid, flex or just absolute positioning to create the something like the attached.

Three things that currently seem like they will drive this decision. I would appreciate any feedback about how to overcome these challenges.

* The right "column" has a 'summary' and 'recommendations'. If either of those overflows to the next page, I need a header to say "Summary, continued" or "Recommendations, continued." I thought I could do this with a table but, on reflection, I'm not so sure... any thoughts?

* The left column must stretch all the way from just under the header to the bottom. For that, I'm thinking `position: absolute; top: 0; bottom: 0;` I thought about a table but I don't know how I would make the last thatpage stretch to the bottom.

* Some of the content in the left "column" will appear only on the first page; some will appear on every page. I'm uncertain about this one because it isn't a header or footer -- and since the right "column" will likely wrap, it won't be a separate page, so... at first I thought that would be relatively easy but now I'm not sure.
  1. pdf_sketch.jpg57.1 kB
mikeday
There are some constraints here: Prince does not support grid layout and absolutely positioned boxes cannot break across multiple pages. There is the @page @left margin box which may be helpful, and tables can have repeating thead and caption elements. However if you want conditional content and layout that changes on subsequent pages it almost always requires some JavaScript work as CSS cannot yet describe these kinds of layouts.