Text wrapping around an image (or any element)

StackOverflow https://stackoverflow.com/questions/458384

  •  19-08-2019
  •  | 
  •  

Question

Is there a way with CSS to wrap text on both sides of an element (an image for example). I am trying to have an image positioned in the middle of a paragraph and would like text to flow over it. Please see the image for an example. http://i42.tinypic.com/14mvp69.jpg

Positioning an element typically takes it out of the document flow; so that doesn't work.

Was it helpful?

Solution

I don't think so, no. Not without working with multiple text-columns.

I just threw together one possible solution. You can access it at http://www.sampsonresume.com/labs/img-in-middle/

OTHER TIPS

The only thing that I have seen similar to this would be the A List Apart article: Cross-Column Pull-Out Part Two: Custom Silhouettes. You still need multiple text columns, and even ALA lists it as "experimental". It may be worth checking out, though.

Example here.

Not without some very tricky/tedious text parsing. But anyone trying to read that text would hate you if you made them jump back and forth across an image twice per line, so that's probably a good thing.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top