title: Shape-outside with the attribute position (relative,absolute) or float
body: <p>I'm trying to build an div with a circular shape (border-radius: 50%) and cut the space around this very element so the text will take the shape of my div (shape-outside: circle(50%). </p>
  
  <p>So far so good the problem though is that I'm not able to use the attribute of the position to style it because:</p>
  
  <ol>
  <li><p>If I use the position:absolute on my shape, the div will be taken out of the flow of the other elements (my paragraph included) so the text won't move if I will position it near the element.</p></li>
  <li><p>if I use the attribute position:relative with float:left the position of my div will stay there, so the shape-outside: circle(50%) will work and my div won't move, but in this case, the attribute of the shape-outside will be apply to the real space (the with and the height of the div will take the whole space plus the position of the element.</p></li>
  </ol>
  
  <p>This is my example with the attribute position: relative:</p>
  
  <pre><code>&lt;div class="box"&gt;
      &lt;div class="half"&gt;
          &lt;div class="rounded"&gt;
              &lt;img src="myimage" alt="logo new path"&gt;
          &lt;/div&gt;
          &lt;div class="shapeout"&gt;&lt;/div&gt;
          &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="half"&gt;
          &lt;h1&gt;Holiday Clinic Hours&lt;/h1&gt;
          &lt;p&gt;All walk-in clinic locations will be closed for the following holidays in December &amp; January.&lt;/p&gt; 
          &lt;p&gt;We are closed:&lt;/p&gt;
          &lt;ul&gt;
              &lt;li&gt;Friday, December 22nd&lt;/li&gt;
              &lt;li&gt;Monday, December 25th&lt;/li&gt;
              &lt;li&gt;Tuesday, December 26th&lt;/li&gt;
              &lt;li&gt;Friday, December 29th&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>.box {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  }
  .half {
      padding: 40px;
      color: white;
  }
  .half:nth-of-type(1) {
      background: #333333;
      -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
      max-width: 25%;
  }
  .half ul {
      padding: 0;
  }
  .half li {
      font-weight: bold;
      list-style-type: none;
  }
  .half:nth-of-type(2) {
      background: #0154A6;
      -ms-flex-preferred-size: 75%;
      flex-basis: 75%;
      max-width: 75%;
  }
  .half h1 {
      color: white;
  }
  .rounded {
      width: 100px;
      height: 100px;
      background: white;
      padding: 33px;
      border-radius: 50%;
      position: relative;
      top: -1%;
      left: -11%;
      float: left;
      shape-outside: circle(50%);
  }
  .rounded img {
      width: 80px;
  }
  </code></pre>
  
  <p>Does anyone ever had my same issue?</p>
  
  <p>Just to be clear, I'm trying to obtain something like that:</p>
  
  <p><a href="https://i.stack.imgur.com/itxVy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/itxVy.png" alt="enter image description here"></a></p>