Text doesn't flow under an image with align=right

[alkisg]

Thanks again for mkdocs-material, I've only been using it for a day and I already love it.

I had an issue with right-aligned images. A picture/demo is worth a thousand words: https://pe86.github.io/linux/epoptes/
Source: https://github.com/pe86/linux/edit/main/docs/epoptes/index.md

There, I added an image: ![0.5.7_epoptes_startup.png](0.5.7_epoptes_startup.png){ align=right width=300 }

The problem is that the text of the bulleted list there doesn't flow under the image, it doesn't take advantage of the full div width (my resolution is 1920x1080 if it matters).

My HTML5 knowledge is limited, but by inspecting the CSS in Firefox I think that this issue is caused by display: flow-root. If I change it to inline for the <ul> element, then wrapping occurs properly.

Is this by design? Is my markdown appropriate? Any ways around the issue?

And a second, somewhat related question: is there any way to do clear: both without introducing a custom css? So that e.g. the headings in https://pe86.github.io/linux/Εγκατάσταση_Ubuntu/ don't overlap with the right-aligned images...

[squidfunk]

Are you putting image and text on separate lines in the Markdown document? If so, that could be the problem, because the image is in its own p. Put them on the same line, i.e., start the paragraph with the image and write the text directly after that.

This is an issue with Markdown.

[alkisg]

My markdown essentially is:

![image.png](image.png){ align=right width=300 }Small paragraph here.

- Bulleted list starts while the image is still at the right
- But the list is very long
- So when the image "ends" at the right, the text of the list is supposed to flow under the image.

Both the paragraph and the bulleted list are supposed to be at the left of the image, as the paragraph is too small. But the list is long, so after a few items, it's supposed to flow under the image

1. How would I fit the bulleted list in the same block element as the paragraph?
2. If that's not possible, how would I put a clear: both after the paragraph, so that the bulleted list starts after the image, so that it flows under it?

[squidfunk]

Good question. I don't think it's possible with how the Markdown parser works. Maybe ask the maintainers of Python Markdown?

[alkisg]

I think that the "display: flow-root" is the cause of the problem and that it needs to be removed from the CSS.

I don't think it's appropriate to expect everything to be inside a single block element, just to make "flow-root" work.

I do not have enough experience with mkdocs, material, CSS etc yet to fully back up my claims, so for now I'll work around the issue by using a custom CSS that:

1. Removes the display: flow-root, if not from all, then at least from the most common elements like paragraphs and lists, and
2. Adds { clear: both } to heading elements, so that there's no need to specify it anywhere in the markdown.

Thank you very much for your input!

[squidfunk]

Note that removing display: flow-root will most likely break inline admonitions.

[alkisg]

Done! My first site is already migrated from just-the-docs to mkdocs-material: https://ltsp.org

I'm using this stylesheet to {: .right33 } align the images, and this javascript to make them clickable/enlargeable.

Next stop, the pdf export... Thanks again! :)

[alkisg]

Just for posterity, this is a way to create right-aligned thumbnails of images with plain css (without javascript):

Markup:

[![](image.png)](image.png)

CSS:

/* Right align and shrink images that are links to png */
a[href$=".png"]>img {
  clear: both;
  float: right;
  width: 33%;
  margin: 0 0 0.4rem 0.4rem;
}