How to wrap text around an img in CSS?

user_12951136 0
Viewed 2373

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?

css html
3 Answers

.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>

user_115543260

Float to the rescue 

body { 
    margin: 20px; 
    text-align: center; 
} 

img { 
    float: left;  
    margin: 5px; 
} 
p { 
    text-align: justify; 
    font-size: 25px; 
} 
<body> 
    <h1>Headline</h1> 
           
    <div class="square"> 
        <div>  
            <img src="https://via.placeholder.com/150"/>  
        </div> 
          
        <p> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate ut pharetra sit amet. Dui ut ornare lectus sit amet. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Mattis pellentesque id nibh tortor id aliquet. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Arcu risus quis varius quam quisque. Viverra ipsum nunc aliquet bibendum enim facilisis. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Hendrerit dolor magna eget est lorem ipsum. Hendrerit gravida rutrum quisque non tellus. Mauris sit amet massa vitae tortor condimentum. Nibh ipsum consequat nisl vel. Amet facilisis magna etiam tempor.
        </p> 
    </div> 
</body>

user_142592730

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

user_24420990
Related