Question

For some reason div elements change their parents during rendering in unexpected way, reproducible in Firefox and Chrome.

E.g.

<div class="main">
    <div class="slot"/>
    <div class="slot"/>
</div>
<div class="footer"></div>

Firefox debugger will show as this at runtime as:

<div class="main">
    <div class="slot"><div class="slot"/></div></div>
    <div class="footer"></div>
</div>

When I remove .slot elements(see the code attached), everything renders as expected(#footer place in tree after rendering is same as in the source).

Code:
http://pastebin.com/3j3aQFdh

Answer 1

The problem is that you use empty divs: like that

<div />

You should try to change your code to use valid divs with empty content:

<div></div>