For work I'm setting up the CSS for a QR code element that needs to be floated right (same issue with 'page outside') to sit next to multiple paragraphs of text. The issue is that when the section the QR code appears in is too far down the page the QR code is clipped.


Here is what it should look like no matter where the section is placed on the page



Would like to know if it possible to have Prince 'push' the element to the next page.

Here is the CSS (commented out parts are variations I've tried to to solve this to no avail)

/* QR Code */

.qrCode {
	max-width: 72pt;
	float: right;
	/* -prince-float: page outside; */
	/* -prince-margin-inside: 3pt; */
	padding: 0 3.75pt;
	color: #fff;
	background-color: black;
	text-decoration: none;
	/* -prince-float-tail: fill-page;
	-prince-float-defer-page: right; */
}

.qrCodeImage {
	max-width: 67.5pt;
	max-height: 93.75pt;
	display: block;
}

.qrCodeHeader,
.qrCodeFooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 15pt;
	max-height: 37.5pt;
	max-width: 67.5pt;
	margin-top: 3pt;
	margin-bottom: 3pt;
}

.qrCodeHeader *,
.qrCodeFooter * {
	font-family: var(--ff-bold);
	font-size: 6.5pt;
	line-height: 6.5pt;
}

.qrCodeFooter * {
	font-size: 8.5pt;
}

.qrCodeHeader img,
.qrCodeFooter img {
	max-width: 37.5pt;
	max-height: 15pt;
}

Here is an example fragment of the html

         <div icc-role="Section" class="level-2" id="*****_Ch03_Sec305">
            <h2 class="Level2Title">Section 305—Protection of Pipes and Plumbing System Components</h2>
            <a class="qrCode"
               href="*****">
               <div class="qrCodeHeader"><span>Scan for <br>Changes</span><img
                     src="Images/*****_Ch03_Sec305-8cfd60e.png"></div><img class="qrCodeImage" id="qr"
                  src="Images/*****_Ch03_Sec305-8cfd60e.png">
               <div class="qrCodeFooter"><img src="Images/qrBottomLeft.png"><span>8cfd60e</span></div>
            </a>
             <div icc-role="legis-section" class="level-3" id="*****_Ch03_Sec305.1">subsection content</div>
             <div icc-role="legis-section" class="level-3" id="*****_Ch03_Sec305.2">subsection content</div>
             <div icc-role="legis-section" class="level-3" id="*****_Ch03_Sec305.3">subsection content</div>
             <div icc-role="legis-section" class="level-3" id="*****_Ch03_Sec305.4">subsection content</div>
             <div icc-role="legis-section" class="level-3" id="*****_Ch03_Sec305.5">subsection content</div>
             <div icc-role="legis-section" class="level-3" id="*****_Ch03_Sec305.6">subsection content</div>
             <div icc-role="legis-section" class="level-3" id="*****_Ch03_Sec305.7">subsection content</div>
             <div icc-role="legis-section" class="level-3" id="*****_Ch03_Sec305.8">subsection content</div>
         </div>

Also, to note, I can't 'spread' the floated element across multiple pages like in this example. https://www.princexml.com/howcome/2021/guides/float/#spreads

Because the content is dynamically generated. XML -> XSLT -> HTML -> Prince -> PDF

1. floatrightQr.png‎ 100.0 kB ‎
   qr code floated right and clipped
2. validQr.png‎ 207.1 kB ‎
   qr code floated right with enough space