image aligned right - need <br clear="all">

[David King]

I'm a beginner, helping to document an open source project.

I have an image aligned right. The text flows nicely on the left.

But at some point I wish the text to continue below the image, to make it easy for the reader. In html we'd simply use <br clear="all">, and there are preferred css alternatives.

How do I achieve that please?

html is the only target.

Thank you!

[Martin Bless]

Hello David,

yes, it can be done. See how we are doing this with our TYPO3 theme:

https://docs.typo3.org/m/typo3/demo-t3SphinxThemeRtd/master/en-us/ImagesAndFigures/Index.html#image-float-left

Here is what I figured out:

Image float left
================

.. |example-teaser-left| image:: ../images/loremipsum/a4.jpg
   :alt: Left floating image
   :class: float-left with-shadow

|example-teaser-left|
Typesetting is the composition of text by means of arranging physical
types[1] or the digital equivalents. Stored letters and other symbols
(called sorts in mechanical systems and glyphs in digital systems)
are retrieved and ordered according to a language's orthography for
visual display.

.. rst-class:: clear-both

Floating cleared. Below the image.

You may have to add the classes '.clear-both {clear: both}' and '.float-left {float: left ! important}' to the CSS of your theme.

Am 21.12.20 um 17:08 schrieb David King:

--

Martin Bless

[David King]

Marvellous - thank you Martin. Luckily I had already added a custom css file, so that made it easy. I've used align: right on the image rather than a class, which seems to work. So I just have:

..  image:: ../images/loremipsum/a4.jpg

   align: right

my text here

.. rst-class:: clear-both