# 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:** 1\
**Showing post:** 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).

---

_[View the full topic](https://meta.discourse.org/t/lightbox-generates-invalid-html-structure-div-inside-p-causing-display-errors/360706)._