Strange DOM interaction with an <h3>

[pgeipi10]

Why is the KaTeX output included in <h3> (see border) when DOM-wise it is clearly outside of it?

[edemaine]

That definitely looks weird. But it's pretty hard to tell what's going on from the screenshot alone. Could you post a link to the website, or a minimum reproduction?

[pgeipi10]

See section 12.6.3 here.

[edemaine]

Ah, this is because of the float hack from the other thread. You'll want to add a clear style to something afterward to end the floats. For example, you could add the following:

h3 { clear: both }

Or more robustly, you could add a "clearfix" to .katex-display:

.katex-display:after {
  content: "";
  display: table;
  clear: both;
}

The latter seems to be failing in your context because you're wrapping every .katex-display with a <div>. It works if you can take them outside the <div> somehow.

[pgeipi10]

Actually, I was going to ask about that. If I don't wrap my .katex-displays in a div, they started appearing out of order with text. I can demonstrate that if necessary. Is that also a side-effect of the fix from the other thread? Is there a different fix for that?

[edemaine]

The clearfix fix above should fix that as well (hopefully).