CSS wrap text around centred image

Question

How to wrap a text around a centered (round) image like this:

I tried this jsfiddle but the text goes behind the image and does not flow around it.

#circle {
	float:positioned;
	position: absolute;
	top:10%;
	left: 40%;
	wrap-shape: circle(50%, 50%, 120px);
	wrap-margin: 10px;
        }

<div id="circle"><img src="http://www.guitare-rabuffetti.fr/test/circle.png"/></div>	

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.
Mauris vel lacus vitae felis vestibulum volutpat. Etiam est nunc, venenatis in, tristique eu, imperdiet ac, nisl. Cum sociis natoque penatibus et 
</div>

Answer 1

As already noted, shape wrapping currently only works for floated elements, so this exact situation isn't do-able with CSS only, because only wrapping on one side of a shape is permitted (expected). Once the CSS Shapes 2 and/or CSS Exclusions specs) are adopted, we will be able to do this with not only shapes but also image transparency.

I ran into this same problem while trying to figure out how shapes and CSS columns interact (spoiler: decent, but not organically). The problem seems to be that the layout algorithm looks for the farthest edge (ignoring the possiblity of multiple sides), then starts content layout from that coordinate. For elements in the middle, this means you get text only on one side. For CSS columns (which is how I figured this out), the layout again starts from the farthest edge, but then continues straight down instead of wrapping to the shape on each line (see fiddle), so protrusions on shapes (like a star polygon) can actually force wrapping content to end up below the entire shape instead of squished to one side or flowing down into the protrusion.

(note there are 3 sets of 2 columns on 2nd example)

---

However, there are a couple options that may work for similar situations. I have adapted the following from the other answers/comments, but had to make several changes to get them working (and several of the CSS attributes were experimental and are no longer valid), so I felt this was better as a new answer than as edits/comments:

Wrap one side

Use shape-outside on a left floated div to create a wrapping circle, then use margin-left to push it away from the left side. I added a circle inside the div for illustration (your image URL is 404), but had to tweak the location as Chrome did not calculate its position the way one would expect once margins were added.

http://jsfiddle.net/brichins/50h20kxa/1/

Columns and mirrored wrapping elements

If columns are acceptable, manually (see above CSS column discussion) creating 2 containers for columns and placing a shaped element on the side of each gives the following:

http://jsfiddle.net/brichins/gvhpfccu/

The disadvantage here is columns where you may have wanted a single block (not necessarily bad for readability), as well has having to compute an appropriate split for your content.

Reading

• Intro and walkthrough on HTML5 Rocks: https://www.html5rocks.com/en/tutorials/shapes/getting-started/

  • References the amazing Alice in Wonderland example from 2013. It appears to not function completely anymore, but the entire talk is still interesting

• Creating Non-Rectangular Layouts With CSS Shapes: https://sarasoueidan.com/blog/css-shapes/

• CSS Tricks article: https://css-tricks.com/almanac/properties/s/shape-outside/

• D3plus workaround plugin (for similar SVG solutions): https://d3plus.org/examples/utilities/a39f0c3fc52804ee859a/

Answer 2

Question resolved :

Actual situation : The CSS shape works for float, so it's not for centered images now. This property works only for Chrome and Opera at the moment. Maybe there will be a solution for non float elements in the future. Look at this W3C editor's draft : http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html

A hand made CSS solution : Basically, there are 2 columns (like in newspapers). The text begins in the left column and goes down. The text continues on the top of the right column and goes down. The columns are a bit higher than the image. The left column has a half invisible circle as well as the right column - on the position of the centered image. The two half circles are build by multiple boxes of different length, they are invisible. (The hight of the boxes is the height of the font.) The text must be justified. The text is now flowing around the half circles in each column. The image will be positioned over the 2 invisible half circles.

Another, not very technical solution is to use Libre Office and Inkscape to produce an SVG file. Import the picture into Libre Office - wrap the text around the image - save as PDF - open Inkscape - save as SVG - import the SVG in your Webpage - done.

Thanks everybody for helping me and for your inputs !