Make a Div block wrap around a shape

Question

I am pretty new with HTML, CSS and I wanted to know if this layout is possible to achieve.

I have tried using the shape-outside property. But the result is coming out like this:

This is what I have done so far: Codepen link

.container {
    display: block;
    max-width: 1366px;
    margin: 0 auto;
}

.img-wrapper {
  border-radius: 50%;
    width: 427px;
    height: 427px;
    shape-outside: circle();
    float: left;
    overflow: hidden;
  margin-right: 4rem;
  margin-top: 8rem;
}

.image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cont{
  display:flex;
  flex-direction: column;
}

<div class="container">
<div class="img-wrapper">
    <img src="https://picsum.photos/id/237/200/300" loading="lazy" alt="" class="image">
</div>
<div class="content-wrapper">
  <div class="cont">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>
  </div>
  <div class="cont">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>
  </div>
  <div class="cont">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>
 </div>
  <div class="cont">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>
  </div>
  </div>
</div>

Answer 1

shape-outside is the correct approach, but some of your other styling was interfering with its operation. Here’s a working starting point. Note that I have added red borders around the section boxes so that you can clearly see how they behave relative to the circular image. After running the snippet, use the full page link to test the responsiveness

.image1, .image2 {
  border-radius: 50%;
  object-fit: cover;
}

.image1 {
  width: 500px;
  height: 500px;
  float: left;
  shape-outside: circle(50%);
  transform: scale(0.9);
}

.image2 {
  width: 80px;
  height: 80px;
}

.content-wrapper>div {
  display: flex;
  gap: 1em;
  border: 1px solid red;
}

<div class="container">
  <img src="https://picsum.photos/id/237/900/900" loading="lazy" alt="" class="image1">
  <div class="content-wrapper">
    <div>
      <img src="https://picsum.photos/200/200" loading="lazy" alt="" class="image2">
      <div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </p>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/200/200" loading="lazy" alt="" class="image2">
      <div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </p>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/200/200" loading="lazy" alt="" class="image2">
      <div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </p>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/200/200" loading="lazy" alt="" class="image2">
      <div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </p>
      </div>
    </div>
  </div>
</div>

If you have a fixed size container which doesn't need to be responsive, you could instead just position everything absolutely.

.container {
  width: 1366px;
  height: 930px;
  border: 2px solid dodgerblue;
  margin: 0 auto;
  position: relative;
}

.image1, .image2 {
  border-radius: 50%;
  object-fit: cover;
}

.image1 {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50px;
  top: 165px;
  border: 50px solid #f4f4f4;
}

.image2 {
  width: 80px;
  height: 80px;
}

.content-wrapper>div {
  display: flex;
  gap: 1em;
  border: 1px solid red;
  position: absolute;
}

.content-wrapper h2 {
  margin-top: 0;
}

.content-wrapper>div:nth-child(1) {
  top: 140px;
  left: 497px;
  width: calc(1366px - 497px - 50px);
}

.content-wrapper>div:nth-child(2) {
  top: 340px;
  left: 640px;
  width: calc(1366px - 640px - 50px);
}

.content-wrapper>div:nth-child(3) {
  top: 540px;
  left: 630px;
  width: calc(1366px - 630px - 50px);
}

.content-wrapper>div:nth-child(4) {
  top: 740px;
  left: 435px;
  width: calc(1366px - 435px - 50px);
}

<div class="container">
  <img src="https://picsum.photos/id/237/900/900" loading="lazy" alt="" class="image1">
  <div class="content-wrapper">
    <div>
      <img src="https://picsum.photos/200/200" loading="lazy" alt="" class="image2">
      <div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </p>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/200/200" loading="lazy" alt="" class="image2">
      <div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </p>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/200/200" loading="lazy" alt="" class="image2">
      <div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </p>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/200/200" loading="lazy" alt="" class="image2">
      <div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </p>
      </div>
    </div>
  </div>
</div>

Answer 2

This was a good yet silly problem to solve. You can use the float property with the shape-outside() property to wrap all your things according to the circle or image that you have.

shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

.container-wrapper {
        display: flex;
        justify-content: center;
      }

      .container {
        max-width: 1100px;
        width: 100%;
      }

      .img-wrapper {
        width: 500px;
        height: 500px;
        border-radius: 50%;
        float: left;
        shape-outside: circle();
        margin-right: 20px;
        overflow: hidden; 
      }

      .image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

<div class="container-wrapper">
      <div class="container">
        <div class="img-wrapper">
          <img
            src="https://picsum.photos/id/237/200/300"
            loading="lazy"
            alt=""
            class="image"
          />
        </div>

        <div class="content-wrapper">
          <div class="cont">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
              quae ab illo inventore veritatis et quasi architecto beatae vitae
              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
              aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
              velit, sed quia non numquam eius modi tempora incidunt ut labore
              et dolore magnam aliquam quaerat voluptatem.
            </p>
          </div>
          <div class="cont">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
              quae ab illo inventore veritatis et quasi architecto beatae vitae
              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
              aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
              velit, sed quia non numquam eius modi tempora incidunt ut labore
              et dolore magnam aliquam quaerat voluptatem.
            </p>
          </div>
          <div class="cont">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
              quae ab illo inventore veritatis et quasi architecto beatae vitae
              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
              aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
              velit, sed quia non numquam eius modi tempora incidunt ut labore
              et dolore magnam aliquam quaerat voluptatem.
            </p>
          </div>
          <div class="cont">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
              quae ab illo inventore veritatis et quasi architecto beatae vitae
              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
              aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
              velit, sed quia non numquam eius modi tempora incidunt ut labore
              et dolore magnam aliquam quaerat voluptatem.
            </p>
          </div>
        </div>
      </div>
    </div>