It is not valid to nest a block level element such as `p` *directly* inside an inline element such as `b`.

However, using css such as `display: inline-block` or `position: absolute` is can be conceptually sound to have block level content inside an inline context.

Browsers largely accept such block level elements in an inline element, but under some circumstances, the invalid construct causes real problems:

```
<p><span><p></p></span></p>

```

The above example would *not* be parsed as three nested elements; the innermost `<p>` would instead implicitly close the outer `<p>`, regardless of CSS. You can see [a jsbin demo](http://jsbin.com/ofuhoq/4/edit) of that.

**Is there *some* way of using intermediate elements to validly place block level elements in an inline element?**

**If that's *not* possible, is there an invalid but functional workaround for the majority of cases (preferably also for the tricky `<p>` tag)?**

To be clear, I'm looking for a generic solution that doesn't require invasive changes to document structure (i.e. "just use `span` everywhere, for everything" is not an attractive solution). I want to embed an unknown (dynamically generated) document fragment with potentially block-level content - so fixing the fragment to exclude block level elements is infeasible.

---

Related: (address the validity of direct nesting mostly)

* [Is it wrong to change a block element to inline with CSS if it contains another block element?](https://stackoverflow.com/questions/746531/is-it-wrong-to-change-a-block-element-to-inline-with-css-if-it-contains-another)
* [Block Level Elements inside Inline elements](https://stackoverflow.com/questions/1714121/block-level-elements-inside-inline-elements)
* [Are block-level elements allowed inside inline-level elements in HTML5?](https://stackoverflow.com/questions/6061869/are-block-level-elements-allowed-inside-inline-level-elements-in-html5)