# Lightbox generates invalid HTML structure (div inside p) causing display errors

**URL:** https://meta.discourse.org/t/lightbox-generates-invalid-html-structure-div-inside-p-causing-display-errors/360706
**Category:** Bug
**Tags:** markdown, lightbox
**Created:** [April 7, 2025, 10:26am UTC](https://meta.discourse.org/t/lightbox-generates-invalid-html-structure-div-inside-p-causing-display-errors/360706 "2025-04-07T10:26:10Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![panic](https://avatars.discourse-cdn.com/v4/letter/p/3ab097/32.png) [@panic](https://meta.discourse.org/u/panic)
#### Post date: [April 7, 2025, 10:26am UTC](https://meta.discourse.org/t/lightbox-generates-invalid-html-structure-div-inside-p-causing-display-errors/360706/1 "2025-04-07T10:26:11Z")

</div>

Lightbox generates a \<div\> tag for every image, but div tags cannot be inside p tags (in HTML-spec-speak, [the content model for \<p\> is phrasing content](https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element), [which does not include \<div\>](https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2)). This causes browsers to make these divs close and escape the p tags. Any following content are also out of the p tag, causing issues in some environments. For example,

```plaintext
[details="details" open]
![random image|690x388](upload://2gkjgw9XkBQlTRrNCIxGZ96CLRC.png)
Some text *emphasized* or **bold** or @panic mention
[/details]

```

> **details**
>
> ![random image](https://global.discourse-cdn.com/meta/original/4X/0/f/d/0fdcd72e28e98b7202f9929d44cc19361e999608.png)  
> Some text _emphasized_ or **bold** or @panic mention

should render as

Some text _emphasized_ or **bold** or @panic mention

instead of the current

 ![图片](https://global.discourse-cdn.com/meta/original/4X/8/f/b/8fb0301403199908691b9e265835e0edfa1baf0c.png)

The current behaviour is a result of \<details\> [treating every direct child a block](https://github.com/discourse/discourse/blob/6637eb2b64c83f881f2cd2fef3d5414ecda691f2/plugins/discourse-details/assets/stylesheets/details.scss#L71-L74).

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 9, 2025, 7:00am UTC](https://meta.discourse.org/t/lightbox-generates-invalid-html-structure-div-inside-p-causing-display-errors/360706/2 "2025-04-09T07:00:41Z")

</div>

> [@panic](#):
>
> issues in some environments

Can you expand on this, which environments? It will help us prioritize a fix.

---

<div class="post-metadata">

### Author: ![panic](https://avatars.discourse-cdn.com/v4/letter/p/3ab097/32.png) [@panic](https://meta.discourse.org/u/panic)
#### Post date: [April 10, 2025, 3:50am UTC](https://meta.discourse.org/t/lightbox-generates-invalid-html-structure-div-inside-p-causing-display-errors/360706/3 "2025-04-10T03:50:05Z")

</div>

Such as in the \<details\> tag shown above.