Webpage adds paragraph break at floating image position-CodePudding

I have a long paragraph of text which I'd like to flow around an image which is floated left. Instead it seems there's a paragraph break inserted where I put the image, and the new paragraph starts next to the image. What's odd is that this doesn't happen when I insert a second image further down.
How can I keep my paragraph together and flow properly around the image caption?

HTML:

[...] Integer rutrum at libero ut auctor. Integer sem tellus, imperdiet
non dignissim ut, laoreet sit amet nunc.
    <figure >
        <img src="i/dodecahedron.jpg" width="300" height="300" alt="" />
      <figcaption>
        Artwork by Igne Mikalauskaite
      </figcaption>
    </figure>
Nunc dolor ex, malesuada ac lobortis eget, commodo laoreet est. Lorem 
ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices sapien nunc,
sit amet euismod turpis elementum eu. [text continues]

CSS:

body {
  font-family: Verdana, Geneva, sans-serif;
}
#maincol {
  width:800px;
  background-color:#91C1CC;
  padding:1em;
}
.figureleft, .figureright {
  background-color:white;
  padding:5px;
  border:1px solid black;
}
.figureleft {
  float:left;
  margin:15px 20px 15px 0;
}
figcaption {
  font-style:italic;
  font-size:0.85em;
}

JSfiddle at https://jsfiddle.net/stevenvh/k3tnwyfs/2/

Edit
Tonielton explained that I can't use block elements like figure inside a paragraph, but when I want an image with a caption I'm bound to use a block element of some sort, I guess.

CodePudding user response：

You cannot use <figure> inside de <p>

<figure> it's a block element and your parents are flow elements.

You can read more in -> w3c.github

If you inspect your code snippet, you can see the <p> closed before <figure> start.

You can close your paragraph before the <figure> and start again <p> after `

CodePudding user response：

I think I found it. Tonielton's suggestion of breaking the paragraph before the figure, and restarting a new one after is not the solution, since the new paragraph doesn't follow on the same line as where the previous ended.

Solution: do break the paragraph, but add

<p style="display:inline;">

to both the one before and the one after the <figure> block.

See https://jsfiddle.net/stevenvh/k3tnwyfs/4/