CSS Shapes and shape-outside

Question

I am using Chrome and Safari, in neither of them the attribute shape-outside seems to work. I've put both the -webkit and the normal version.

.circle {
  background-color: #f3a57b;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  -webkit-shape-outside: circle(50%);
  float: left;
}
.text {
  float: left;
  width: 500px;
}

<div class="circle"></div>
<p class="text">Some Text Here</p>

I want to get the text to adapt to the circle like this:http://codepen.io/adobe/pen/Cnvuf

Answer 1

If you remove float:left from .text, you'll see that it works:

.circle {
    background-color: #f3a57b;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    -webkit-shape-outside: circle(50%);
    shape-outside: circle(50%);
    float: left;
}

<div>
    <div class="circle"></div>
    <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem</p>
</div>

JSFiddle

---

As for Firefox and IE, it's not supported (Note: Safari version 8.0).