In the attached example, there are two containers side-by-side which are supposed to be the same size, and appear as such in the browser. When being produced through Prince 12, the bottoms do not align.

This may be a known issue that was resolved in a newer version of Prince, but we aren't in a position to be able to upgrade Prince quite yet. I wasn't sure if there was a workaround we could use until then.

1. index.html‎ 9.0 kB ‎
   Example

Edited 26 Nov 2019 by jweberLUD

You could try the two pass solution. For example, in the first pass calculate the height of each .wrapper-options element and output a snippet of CSS that sets each child's height to the calculated value. Then include this snippet in the second pass.

Mark

Thank you.

Our current platform doesn't support the ability to do multiple passes. If you happen to have additional workaround, I would be interested. Otherwise, we will note this as a known issue with our current platform until we make further upgrades to our system.

Another possible workaround is to put the background on a large block element placed between the title and options, with a negative bottom margin to give it zero effective height. Then place overflow:hidden on the .wrapper-options element so the excess background is removed.

Here's one way to do that just with some additional CSS:

.wrapper-options {
    overflow: hidden;
}

.wrapper-options .options .title:after {
    display: block;
    content: "\00A0";
    background-color: #EBF5FF;
    height: 30rem;
    margin-top: 0.4rem;
    margin-bottom: -30.4rem;
}

Hope this helps

Excellent!

I gave it a try on my side to verify beforehand. Confirmed working!

I really appreciate it.