[SOLVED] CSS: How to wrap text around image with caption

[benali72]

Does anyone know how to code CSS to wrap text around an image that has a caption at the bottom of it?

So -- I'm trying to add a caption underneath a figure (using figcaption). Then I want the text to flow around the figure and its caption.

I seem to be able to EITHER have the caption at the bottom of the figure --OR-- have the text flow around the figure... but not both.

Thank you.

[axrusar]

Try tweaking this:

Code: Select all

<style>
    figure {
      float: left;
      margin: 0 20px 20px 0;
      text-align: center;
    }

    figcaption {
      font-style: italic;
      text-align: center;
    }

    figure:last-of-type {
      clear: both;
    }
  </style>

Then for the image HTML:

Code: Select all

<figure>
    <img src="example.jpg">
    <figcaption>Example Caption</figcaption>
  </figure>

[benali72]

Thank you so much !

That worked perfectly.

I was wracking my brain on this one.... it seems there are so many CSS attributes and I just couldn't find the one I needed.

Thank you again!