clearfix paragraph in restructured text

Question

I've got a reStructuredText document for which I have a set of images and paragraphs that explain them. I want the images to be left justified and the text to flow around them. If I were doing this in html, I'd just insert <div class="clearfix"></div> inbetween the <img><p></p> pairs. In restructured text, I've got something that looks like this:

.. image:: path/to/image.png
   :width: 200px
   :align: left

very interesting paragraph about path/to/image.png

.. image:: path/to/another/image.png
   :width: 200px
   :align: left

probably the most interesting paragraph ever about path/to/another/image.png

The result looks something like this screenshot because it doesn't have clearfix classes inbetween things:

How do I fix this in reStructuredText? Is there a better way?

Answer 1

What you have should work with a default sphinx html build. The wrapping will occur based on text size and image size.

.. image:: path/to/image.png
   :width: 200px
   :align: left

very interesting paragraph about path/to/image.png

Will produce the following results, one with 200px width, and the other with 400px width. With text wrapping dependent on size.

Additional options are available. If the text takes up less vertical space than the image and you want to include the "clearfix" class you can insert custom html by using the raw directive.

.. raw:: html

   <div class="clearfix">

.. image:: path/to/image.png
   :width: 200px
   :align: left

very interesting paragraph about path/to/image.png

.. raw:: html

   </div>