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>

Possible duplicate of [Wrapping text around an image with indentation and justify](https://stackoverflow.com/questions/15209389/wrapping-text-around-an-image-with-indentation-and-justify) — DragonBorn, Jul 22 '18 at 14:55

score 0 · Accepted Answer · answered Jul 22 '18 at 17:10

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>

score 0 · Answer 2 · answered Mar 20 '19 at 09:20

I had the same problem. I was using Bootstrap 4 along with a local style.css file. Try removing float: left; for "#about h1, p" selector, and see if it works. I didn't set the "display: inline-block;" declaration for h1 and p elements and it still worked.

here is my code:

.about p {
  font-size: 25px;
  min-width: 300px;
  text-align: justify;
  text-indent: 15px;
  font-weight: bold;
}
.me {
  height: 400px;
  margin: 0 30px 10px 0;
  box-shadow: 2px 5px 10px 0 hsla(240, 100%, 35%, 1);
}

<head>
  <!-- link to Bootstrap CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>
<body>
  <section class="container bg-primary text-white about" id="about">
        <img src="./images/me.JPG" alt="my picture" class="me rounded float-left"/>
        <h1 class="font-weight-bold display-4">About Me...</h1>
        <p>Hi there! My name is Mohsen, and I'm from Shiraz. I love to learn new things, and though I had just begun to learn about front-end web-development, I'm very
          passionate about it.</p>
      </section>
    </body>

Paragraph wont wrap around an image

2 Answers2