title: Floating a block-level element inside a paragraph
body: <p>I'm writing a compiler from a high-level document to HTML. Basically, I want:</p>
  
  <pre><code>Because blah blah{{margin-note|...}}, it yada yada.
  </code></pre>
  
  <p>to compile to the following paragraph:</p>
  
  <pre><code>Because blah blah¹, it yada yada.
  </code></pre>
  
  <p>and with a box floating on the right of the paragraph in the same level as the margin note number.</p>
  
  <p>The way I approached this is to compile it to the following HTML:</p>
  
  <pre><code>&lt;p&gt;
    Because blah blah&lt;span class="mg-note-num"&gt;1&lt;/span&gt;&lt;span class="mg-note-box"&gt;...&lt;/span&gt;, it yada yada.
  &lt;/p&gt;
  </code></pre>
  
  <p>where <code>mg-note-box</code> shifts the element to the right of the paragraph. This works really well, except that the margin note box couldn't support block-level elements, like <code>ul</code>. When I put <code>ul</code> inside the margin note box, the <code>ul</code> element will be thrown outside of the <code>span</code> tag.</p>
  
  <p>The obvious fix is to change <code>span</code> to <code>div</code> so that <code>ul</code> can stay inside the <code>div</code>, but this is not an option either because <code>div</code> can't stay inside <code>p</code>. Doing so will break the paragraph into two. Instead of:</p>
  
  <pre><code>Because blah blah¹, it yada yada.
  </code></pre>
  
  <p>we would have this instead</p>
  
  <pre><code>Because blah blah¹
  
  , it yada yada.
  </code></pre>
  
  <p>I guess another option is to have a collection phase in my compiler, and move all margin note boxes outside of paragraph. This is also undesirable because for a long paragraph, the position of the margin note boxes will no longer match margin note numbers.</p>
  
  <p>How should I approach this?</p>
  
  <hr>
  
  <p>Update: I should have mentioned that my experiments with <code>inline-block</code> also don't work, but perhaps I did it wrong. Here are what I did:</p>
  
  <p>Let's start with a reference layout (which functions properly but doesn't support block-level elements)</p>
  
  <pre><code>&lt;p&gt;
    before
    &lt;span style="float: right;"&gt;Hello world&lt;/span&gt;
    after
  &lt;/p&gt;
  </code></pre>
  
  <p>This results in </p>
  
  <pre><code>| before after             Hello world |
  </code></pre>
  
  <p>With <code>div</code> and <code>inline-block</code>:</p>
  
  <pre><code>&lt;p&gt;
    before
    &lt;div style="float: right; display: inline-block;"&gt;Hello world&lt;/div&gt;
    after
  &lt;/p&gt;
  </code></pre>
  
  <p>This results in:</p>
  
  <pre><code>| before                        |
  |                               |
  | after             Hello world |
  </code></pre>
  
  <p>With <code>span</code> and <code>inline-block</code>:</p>
  
  <pre><code>&lt;p&gt;
    before
    &lt;span style="float: right; display: inline-block;"&gt;
      &lt;ul&gt;&lt;li&gt;1&lt;/li&gt;&lt;/ul&gt;
    &lt;/span&gt;
    after
  &lt;/p&gt;
  </code></pre>
  
  <p>This results in:</p>
  
  <pre><code>| before                        |
  |                               |
  | - 1                           |
  |                               |
  | after                         |
  </code></pre>
  
  <p>So, no, <code>inline-block</code> doesn't seem to work.</p>