How to wrap text around an img in CSS? - html

Question

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?

Answer 1

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

Answer 2

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