Paragraph wont wrap around an image

Question

Ok so there seems to be a problem with this..I tried so many things, but I'm a noob at this so it's probably something so obvious I'm just missing it...

.container {
 width: 80%;
 margin: auto;
 overflow: hidden;
}

#about {
 min-height: 500px;
 color: white;
 padding: 40px 100px;
}

#about h1, p {
 float: left;
}

#about img {
 float: right;
}

<section id="about">
 <div class="container">
   <h1>About</h1>
   <p>Lorem ipsum dolor sit amet</p>
   <img src="https://picsum.photos/250/250">
 </div>
</section>

Answer 1

Only inline elements flow around floated elements, but both the h1 and p tags are block elements. You can change both of their displays to inline-block however a better solution would probably be just to put the img inside the p tag with the text itself (since text has inline styling by default and will naturally flow around your floated image).

.container {
 width: 80%;
 margin: auto;
}

#about {
 min-height: 500px;
 padding: 40px 100px;
}

#about img {
 float: right;
}

<section id="about">
 <div class="container">
   <h1>About</h1>
   <p><img src="https://picsum.photos/250/250">Lorem ipsum dolor sit amet</p>
 </div>
</section>