2

In HTML I have:

<section>
   <h2>Title here</h2>
   <article>
      <div class = "image">
         <img alt = "image title" src = "image location" height      = "300" width = "231">
      </div>
      <h3> text that needs to be wrapped here</h3>
      <p> here too</p>
   </article>
</section>

How would I code this in CSS to wrap around the image?

2 Answers 2

2

Your image needs to float so the text and can wrap around, we are all telling you this.

If the text has to wrap around a non-rectangular shape, shape-outside can be used too .

The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

Example with a rounded image

div.image img {
  float: left;
  border-radius: 50%;
  shape-outside: ellipse(160px 100px);
  border:solid;
  }
  h3,p {margin:0;}
<section>
  <h2>Title here</h2>
  <article>
    <div class="image">
      <img alt=" title" src="http://dummyimage.com/300x200/e3de88&text=shape-outside">
    </div>
    <h3> text that needs to be wrapped here</h3>
    <p> here too</p>
    <p> here too</p>
    <p> here too</p>
    <p> here too</p>
    <p> here too</p>
    <p> here too</p>
    <p> here too</p>
    <p> here too</p>
    <p> here too</p>
    <p> here too</p>
    <p> here too</p>
    <p> here too</p>
  </article>
</section>

Here is some other example where the text can be layed inside fancy & complexe shapes: https://css-challenges.com/custom-text-shape/ & the pen that goes along https://codepen.io/t_afif/pen/eYpeOXB

0

.image{
  float:left;
  width:30%; 
  margin-right:10px;
}
.image img {
    display:block;
    width:100%;
    height:100px
}
<section>
   <h2>Title here</h2>
   <article>
     <div>
        <div class="image">
         <img s  src="https://upload.wikimedia.org/wikipedia/commons/0/01/Aloe_vera_%284759242525%29.jpg"  >
        </div>
        <div> 
         <h3> text that needs to be wrapped here</h3>
        
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
        xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
        xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
        xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
        xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </div>

   </article>
</section>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.