Atlassian Confluence Page content under my usermacro gets rendered inside Macro DOM Element

Question

I have the Atlassian Confluence Data Center version and developed a user macro that looks like the following:

<div id="doccontrolWrapper">

  <div id="doccontrol" class="doccontrol" style="cursor: pointer">

    <div id="doccontrol-header">

      <div id="doccontrol-layout-div"> </div>

      <div id="doccontrol-subtitle">Doccontrol</div>

      <div id="doccontrol-close-button">&#10006;</div>

    </div>

    <ac:structured-macro ac:name="expand" ac:schema-version="1">

      <ac:parameter ac:name="title">Doccontrol</ac:parameter>

      <ac:rich-text-body> $body </ac:rich-text-body>

    </ac:structured-macro>

    <div id="blocks" style="display: flex; gap: 10px"></div>

  </div>

</div>

<script defer>
Display + Design logic, should not be any problem
...
</script>

(Nested Macro Expand inside this Macro)

---

Problem:

The Macro has a absolute position and renders on the top right of a page. Now, when I use it in the edit mode, insert it like any other Makro to the page and place anything under the macro (f. ex. a text or anything):

the content underneath the Macro gets rendered inside the DOM Element of the Macro, eventough it should not have any connection to it:

The only thing I can think of is the Line <ac:rich-text-body> $body </ac:rich-text-body>, but I tried several things out (delete it, delete only variable ....), nothing worked.

How can I change my Macro, so that anything under it will not be rendered inside the DOM Element of the Macro, but as usual under the Macro as the next DOM Element?

Thank you very much!

Answer 1

I solved the Issue. There was a space necessary inside the <div id="blocks"><div>. Because an empty div destroys the whole page layout. That was it