I have a tricky layout problem I'd like to resolve – it's a general problem in HTML/CSS, but perhaps something can be done in Prince.
Context are business cards, with three 'divs' - a logo at the top, a centered name in the middle, and bottom aligned information at the bottom.
- The .top area is a fixed height, contains a graphic, and is anchored at the top margin.
- The .middle area with the (middle aligned) name to take up the available space between the .top and the .bottom.
- The .bottom area has a variable amount of information/height, and is anchored at the bottom margin.
I.e., the name in the middle is centered between the fixed height logo above it, and the variable height information below it. The middle area takes up all the space not used by the .top and .bottom, so it has a variable height, or is in some other way vertically centered between to other elements, one of which has a variable height.
For the moment, I'm using display:table to take care of the middle and bottom alignment issues, but I can't seem to solve the variable row/cell height issue. For the moment I use an ugly hack of generating different classes and then hard coding heights for all of the areas, but I'd like to sove it in a more flexible way.
Any ideas?
On a more general level, might it be worth considering some more advanced (even if non-standard) methods for dealing with vertical alignment in Prince? It's a mess in HTML, which will hopefully be somewhat or completely solved with the Flexible Box Module *someday*. (ref. http://www.html5rocks.com/en/tutorials/flexbox/quick/ and http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/).
In the same vein, a clear and easy strict alignment to a global/local baseline gird is something I'll be missing as I move away from InDesign to Prince.
Context are business cards, with three 'divs' - a logo at the top, a centered name in the middle, and bottom aligned information at the bottom.
- The .top area is a fixed height, contains a graphic, and is anchored at the top margin.
- The .middle area with the (middle aligned) name to take up the available space between the .top and the .bottom.
- The .bottom area has a variable amount of information/height, and is anchored at the bottom margin.
I.e., the name in the middle is centered between the fixed height logo above it, and the variable height information below it. The middle area takes up all the space not used by the .top and .bottom, so it has a variable height, or is in some other way vertically centered between to other elements, one of which has a variable height.
For the moment, I'm using display:table to take care of the middle and bottom alignment issues, but I can't seem to solve the variable row/cell height issue. For the moment I use an ugly hack of generating different classes and then hard coding heights for all of the areas, but I'd like to sove it in a more flexible way.
Any ideas?
On a more general level, might it be worth considering some more advanced (even if non-standard) methods for dealing with vertical alignment in Prince? It's a mess in HTML, which will hopefully be somewhat or completely solved with the Flexible Box Module *someday*. (ref. http://www.html5rocks.com/en/tutorials/flexbox/quick/ and http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/).
In the same vein, a clear and easy strict alignment to a global/local baseline gird is something I'll be missing as I move away from InDesign to Prince.