CSS alternative for positioning nested divs in mPDF

Question

I am attempting to use odt files as a templates, as it allows non-programmers to build or edit the layout of generated documents. For easy layout adjustment one can use frames (similar to divs). My code converts all the frames to divs and sets their position: fixed; (can't use absolute as mPDF ignores page margins). Each frame has its size and position set separately which I copy into the respective divs style. And all that works fine.

Here's an example of a basic frame converted to HTML:

<div class="frame" style="left: 0in; top: 0in; width: 2.0374in;  height: 0.5717in; z-index: 0;">
    <div style="margin-top: 0.0098in; font-family: Arial; font-size: 8pt; font-weight: bold;">
        Some Text [REPLACE_THIS]
    </div>
    <div style="margin-top: 0.0098in; font-family: Arial; font-size: 8pt;">
        More Text [CHANGE_THIS]
    </div>
</div>

Note: class="frame" sets the position: fixed; Also note all the inline style is a must, as most of it is inline in the odt's XML. Square bracketed ([..]) text gets replaced later.

The problem comes when I have frames inside of frames. As text could be along side of the nested frames I have my PHP look for nested frames and if they exist I wrap them in another div. I set the wrapper div position: relative; so that the nested frames stays within the flow of the parent frame. But in the mPDF this caused the nested frames to act like they are set to static.

Here is an example of a 2 frames nested in another frame converted to HTML:

<div class="frame" style="left: 5.8591in; top: 1.6209in; width: 2.1661in;  height: 1.3134in; z-index: 14;">
    <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;">
        Parent Frame Text [INSERT_STR]
    </div>
    <div id="nestedwrapper" style="position: relative; overflow: visible;">
        <div id="nested1" class="frame" style="position: absolute; left: 0.328in; top: 0in; width: 0.9217in;  height: ; z-index: 15;">
            <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;">
                First Value:
            </div>
            <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;">
                Second Value:
            </div>
        </div>
        <div id="nested2" class="frame" style="position: absolute; left: 1.378in; top: 0in; width: 0.7835in;  height: ; z-index: 16;">
            <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;">
                [FIRST_VALUE] 
            </div>
            <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;">
                [SECOND_VALUE] 
            </div>
        </div>
    </div>
</div>

The above works fine in a browser with nested2 beside nested1, but in mPDF nested2 ends up below nested1. I have tried every combination of position, display and float. Also tried adjusting the width of the parent and wrapper divs. And tried adding the parent frames position to the nested frame posting and setting position: absolute; but if [INSERT_STR] is replaced with multiple lines of text, the subsequent lines are behind the nested frames.

As any programmer knows there is always more than one way to do something so I am looking for some off the wall ideas on how to position the nested frames.

Answer 1

hi position absolute and float and display inline does not work in mpdf use table to align item next to each other. and use position relative and give it top:-30px etc to get the desired position.