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>

Use display: flex, instead of display: block; in the container class. — Joydip Paul
– Joydip Paul, Commented Mar 18, 2024 at 6:50
@JoydipPaul I tried. Doesn't work.. If not with shape-outside, any other approach to achieve the layout? — Monk Jie
– Monk Jie, Commented Mar 18, 2024 at 6:56
I don't understand the requirement exactly. For example, why are the two second blobs one above the other, but their associated texts are not; what should it look like if there was hardly any text in the first section etc.... — A Haworth
– A Haworth, Commented Mar 18, 2024 at 13:35
This problem is not well-defined as it currently stands - in particular the left offset of each of the cont elements has to take into account the height of its p text (so it doesn't overlap with the image). Sadly shape outside is not going to help unless there are further constraints declared (e.g. that the height cannot go above hpx) and so on. Or resort to Javascript to work out how far over to the left the element needs to go. — A Haworth
– A Haworth, Commented Mar 18, 2024 at 16:24

Brett Donald · Accepted Answer · 2024-03-18 22:40:00Z

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>

Hi, Thank you for your answer. But in the layout, the heading and paragraph are aligned. The paragraph shouldn't wrap. The whole div block with the class "cont" should wrap. That's why I was wondering if there's any other approach to achieve the layout if it's not with shape-outside property
Added a second snippet to demonstrate the absolute positioning option.

iamsmruti · Accepted Answer · 2024-03-18 07:58:56Z

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>

But the problem is that the heading and the paragraph are aligned.. and in this case, the paragraph is also wrapping.. which is not the same as shown in the layout

Collectives™ on Stack Overflow

Make a Div block wrap around a shape

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related