CSS alternative for positioning nested divs in mPDF
<p>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 <code>position: fixed;</code> (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.</p>

<p>Here's an example of a basic frame converted to HTML:</p>

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

<p>Note: <code>class="frame"</code> sets the <code>position: fixed;</code> 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.</p>

<p>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 <code>position: relative;</code> 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 <code>static</code>.</p>

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

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

<p>The above works fine in a browser with <code>nested2</code> beside <code>nested1</code>, but in mPDF <code>nested2</code> ends up below <code>nested1</code>. I have tried every combination of <code>position</code>, <code>display</code> and <code>float</code>. 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 <code>position: absolute;</code> but if <code>[INSERT_STR]</code> is replaced with multiple lines of text, the subsequent lines are behind the nested frames.</p>

<p>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.</p>