Why sibbling div elements are rendered as children of one of them

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>