Float Element in the Middle of a Paragraph

Say you want to have an image (or any other element) visually float left into a paragraph of text. But like… in the middle of the paragraph, not right at the top. It’s doable, but it’s certainly in the realm of CSS trickery!

One thing you can do is slap the image right in the middle of the paragraph:

<p>
  Lorem ipsum dolor sit amet consectetur, adipisicing 
  <img src="tree.jpg" alt="An oak tree." />
  elit. Similique quibusdam aliquam provident suscipit 
  corporis minima? Voluptatem temporibus nulla
</p>

But that’s mega awkward. Note the alt text. We can’t have random alt text in the middle of a sentence. It’s semantically blech and literally confusing for people using assistive technology.

So what we have to do is put the image before the paragraph.

<img src="tree.jpg" alt="An oak tree." />

<p>
  Lorem ipsum dolor sit amet consectetur, adipisicing 
  elit. Similique quibusdam aliquam provident suscipit 
  corporis minima? Voluptatem temporibus nulla
</p>

But when we do that, we aren’t exactly floating the image in the middle of the paragraph anymore. It’s right at the top. No margin-top or vertical translate or anything is going to save us here. margin will just extend the height of the floated area and translate will push the image into the text.

The trick, at least one I’ve found, is to leverage shape-outside and a polygon() to re-shape the floated area around where you want it. You can skip the top-left part. Using Clippy is a great way to get a start to the polygon:

But instead of the clip-path Clippy gives you by default, you apply that value to shape-outside.

That should be enough if you are just placing a box in that place. But if it’s literally an image or needs a background color, you might also need to apply clip-path and perhaps transform things into place. This is where I ended up with some fiddling.

See the Pen
Float cutout in middle of paragraph. by Chris Coyier (@chriscoyier)
on CodePen.

Comments

Glenn

# November 4, 2019

You raise a significant accessibility problem that I hadn’t considered – how to deal with images inside a paragraph. If it’s just for presentation you could do without an alt tag or go aria-hidden with it but I’m thinking of how ill-equipped CMS’s are at handling this. It’s very easy for a client to plonk an image anywhere and give it whatever alt text they want. I’m trying to think of a way to handle this… using your example I guess you could use JS to target images inside paragraphs and apply the cut-in class, or maybe make a few classes like that so you could account for multiple images… or add a custom field to the back-end so the client can have a little control over where the images are. None of this feels particularly tidy but for semantics and accessibility’s sake it should be worked out.

Adrian Roselli

Permalink to comment# November 6, 2019

You have identified a big reason why copywriters need to craft the text in the alt attribute along with the surrounding content. This is also why writing the alt once does not work for images used more than once — think of the WordPress media gallery. This excludes strictly decorative images with alt="" of course.

rosazotano

# November 5, 2019

Fantastico post!
Felicidades!

Davor Suljic

# November 9, 2019

Razvan Caliman wrote a great article – https://www.html5rocks.com/en/tutorials/shapes/getting-started/ – about CSS Shapes. His simple solution is to use shape-outside: content-box.

.cut-in {

  ...

  float: left;
  shape-outside: content-box;
  margin-top: var(--top); 
}

Chris

# November 9, 2019

A potentially simpler approach for achieving the same thing is to use a zero-width float with a non-zero height before the floated image to push it down. (Use clear: left on the image to nudge it down.)

Here’s an example where the <img> is inside of the <p> element:

And here’s an example where the <img> is inside of a <picture> element:

This comment thread is closed. If you have important information to share, please contact us.