column selectors or "gravity"
I have a two column layout where within each column could be 1 to say 5 blocks where each block contains an image and some text. Since the size of the blocks is variable and the number of blocks per column is variable, I'd like the first block to be at the top of the page, the last block to be at the bottom of the page, and the middle blocks to be spaced evenly. Is there a way to create this sort of gravity so that items gravitate towards the edges of the page to fill it out?
I thought it could be done by using a selector to get the last child on the column and doing float: column-bottom, but I can't see any way to specify that.
Any ideas?
It is possible to float blocks to the top and bottom of a column, but it is not possible in general to achieve the "spaced out" effect that you describe, where a variable amount of space is inserted between blocks. Sorry!
This is an interesting generalization of the classic vertical centering problem, which CSS does not allow to solve satisfactorily.
The easiest way to center vertically is to use a table cell with vertical-align: middle. I assume this problem might be solved in the same way, with a table of height: 100% (or fixed height if 100% doesn't work), and table cells around each block. This require being able to specify that each cell has the same height, without knowing how much rows there are. Would specifying height: 100% on the cells themselves work?
What I ended up doing was making a Python script that generates the layout for each page and then creates a bunch of page sized divs, each with the exact layout I want. I couldn't get the CSS to do the type of flow I needed. Scripting support in prince would be nice.
Has there been any movement on this issue? Does anyone have a better solution?
Here's the specific issue I have:
I have a document with elements of variable length that cannot be split across a page. So I avoid page-breaks within them using CSS provided by prince.
But when this is used, and the element is forced to the next page, there's all this whitespace at the bottom of the page. Is there any way to redistribute that whitespace into the elements on the page, so the page is filled, and spaced more evenly?
Tables with a specified height (eg. equal to the page height) will evenly expand their rows to fit. However, I doubt this will be general enough to handle the layout problem that you are describing; I don't think that CSS can currently express that.