How do I wrap text around two images in HTML/CSS?

Question

I'm working on an assignment for an intro to web programming class, and I'm trying to figure out how to wrap two different images around a paragraph on one of the pages. I want it to be kind of like

*image* paragraph paragraph
paragraph paragraph paragraph
paragraph paragraph *image*

I'm struggling on how to actually get it to work. My HTML file and my CSS file are copied and pasted below. The paragraph and images are in <div d> down below. Any help would be greatly appreciated :)

/* Project 2: Coffee Unlimited */

body {
  background-image: url("../images/logo_on_door.png");
  background-color: rgba(0, 0, 0, 0.3);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: white;
  text-shadow: 2px 2px 8px black;
  font-family: 'Lato', sans-serif;
}

#container {
  z-index: 10;
  margin: 20px 20px 20px 20px;
  width: auto;
  height: auto;
  /* border: 1px solid #111; */
  padding: 20px;
  /* CSS Grid Structure */
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 150px 1fr;
  grid-auto-rows: 150px 1000px;
  grid-template-areas: "a b" "c d";
}

#a,
#b,
#c,
#d {
  z-index: 15;
  font-variant: small-caps;
}

#a {
  grid-area: a;
}

#a h1 {
  font-size: 1.2em;
}

#b {
  grid-area: b;
}

#b h1 {
  font-size: 4em;
}

#c {
  grid-area: c;
}

#c ul {
  text-align: center;
  font-size: 1.5em;
}

#d {
  grid-area: d;
}

#d h1 {
  float: left;
  font-size: 1.4em;
  padding: 30px;
  text-align: justify;
  line-height: 50px;
}

#d p {
  float: left;
  font-size: 1.4em;
  padding: 30px;
  text-align: justify;
  line-height: 50px;
}


/* Classes */

.middle {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <title>Project 2: Coffee Unlimited</title>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="">

  <!-- Set View Size -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Stylesheets -->
  <link href="css/destyle.css" rel="stylesheet" />
  <link href="css/style.css" rel="stylesheet" />

  <!-- Google Font(s) -->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

  <!-- Favicon -->
  <link rel="icon" href="favicon/favicon.png" type="image/png" sizes="16x16">

</head>

<body>

  <div id="container">

    <div id="a" class="middle">

      <h1>C o f f e e<br><br>U n l i m i t e d</h1>

    </div>

    <div id="b" class="middle">

      <h1><u>m e n u</u></h1>

    </div>

    <div id="c">

      <ul>

        <br>
        <br>

        <a href="index.html">
          <li>HOME</li>
        </a>

        <br>
        <br>
        <br>

        <a href="menu.html">
          <li>MENU</li>
        </a>

        <br>
        <br>
        <br>

        <a href="locations.html">
          <li>LOCATIONS</li>
        </a>

      </ul>

    </div>

    <div id="d">

      <img src="images/logo_on_cup.png" style="width:400px;height:auto;">

      <p>Then God said, Let the waters in the garden at the time of the sea and over the day and the lesser light to rule the day and the lesser light to rule the night - and the earth when they were created. In the day that you were naked? Have you eaten
        from the tree that is upon the earth. And it was very good. And there was evening and there he put the man and for his wife, and they knew that they were created. In the day and over the birds of the trees in the garden. The earth and subdue it;
        and have dominion over the night, and to separate the light Day, and the darkness he called Night. And there was no one to till it and keep it. To the woman he said, I will greatly increase your pangs in childbearing; in pain you shall bring forth
        children, yet your desire shall be for signs and for seasons and for seasons and for days and years. The earth brought forth vegetation: plants yielding seed of every kind: cattle and creeping things and wild animals of the heavens and the earth
        and subdue it; and have dominion over the night, and to separate the day from the garden of Eden he placed the cherubim, and a sword flaming and turning to guard the way to the tree of life.</p>


      <img src="images/logo_on_cup_1.png" style="width:400px;height:auto;">

    </div>
  </div>
</body>

</html>

Do you know in advance the aspect ratio of the images? (or their natural dimensions of course). This might help: https://stackoverflow.com/questions/19770925/floating-an-image-to-the-bottom-right-with-text-wrapping-around#:~:text=I%20have%20a%20text%20container%20with%20paragraphs%20and,flush%20with%20the%20bottom%20of%20the%20last%20paragraph. — A Haworth, Sep 13 '22 at 07:09
read this: https://css-tricks.com/float-an-element-to-the-bottom-corner/ — Temani Afif, Sep 13 '22 at 14:22

score 0 · Answer 1 · answered Sep 16 '22 at 15:25

I will consider my previous answer that consider the bottom float image and simply add the top one:

.wrapper {
  display: flex; /* this is needed for the height:100% */
}

.box {
  text-align: justify;
  font-size: 20px;
}

img:first-of-type {
  float: left;
  margin-right: 15px;
}

img:last-of-type {
  float: right; /* shape-outside only apply to float elements */
  height: 100%; /* take all the height */
  width: 100px;
  margin-left: 15px;
  /* push the image to the bottom */
  object-fit: contain;
  object-position: bottom;
  /**/
  shape-outside: inset(calc(100% - 100px) 0 0); /* make the text flow on the top free space*/
}

<div class="wrapper">
  <div class="box">
    <img src="https://picsum.photos/id/1069/100/100">
    <img src="https://picsum.photos/id/1069/100/100">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna
    ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent
    ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas
  </div>
</div>

Leonardo Doherty · Answer 2 · 2022-09-13T02:50:10.600

Move your img tags inside p tags And add float in img class CSS. Dont forget to clear the float.

/* Project 2: Coffee Unlimited */

body {
  background-image: url("../images/logo_on_door.png");
  background-color: rgba(0, 0, 0, 0.3);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: white;
  text-shadow: 2px 2px 8px black;
  font-family: 'Lato', sans-serif;
}

#container {
  z-index: 10;
  margin: 20px 20px 20px 20px;
  width: auto;
  height: auto;
  /* border: 1px solid #111; */
  padding: 20px;
  /* CSS Grid Structure */
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 150px 1fr;
  grid-auto-rows: 150px 1000px;
  grid-template-areas: "a b" "c d";
}

#a,
#b,
#c,
#d {
  z-index: 15;
  font-variant: small-caps;
}

#a {
  grid-area: a;
}

#a h1 {
  font-size: 1.2em;
}

#b {
  grid-area: b;
}

#b h1 {
  font-size: 4em;
}

#c {
  grid-area: c;
}

#c ul {
  text-align: center;
  font-size: 1.5em;
}

#d {
  grid-area: d;
}

#d h1 {
  float: left;
  font-size: 1.4em;
  padding: 30px;
  text-align: justify;
  line-height: 50px;
}

#d p {
  float: left;
  font-size: 1.4em;
  padding: 30px;
  text-align: justify;
  line-height: 50px;
}


/* Classes */

.middle {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.float-image {
  float: left;
  margin: 20px;
  max-width: 60px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Project 2: Coffee Unlimited</title>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="">

  <!-- Set View Size -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Stylesheets -->
  <link href="css/destyle.css" rel="stylesheet" />
  <link href="css/style.css" rel="stylesheet" />

  <!-- Google Font(s) -->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

  <!-- Favicon -->
  <link rel="icon" href="favicon/favicon.png" type="image/png" sizes="16x16">

</head>

<body>

  <div id="container">

    <div id="a" class="middle">

      <h1>C o f f e e<br><br>U n l i m i t e d</h1>

    </div>

    <div id="b" class="middle">

      <h1><u>m e n u</u></h1>

    </div>

    <div id="c">

      <ul>

        <br>
        <br>

        <a href="index.html">
          <li>HOME</li>
        </a>

        <br>
        <br>
        <br>

        <a href="menu.html">
          <li>MENU</li>
        </a>

        <br>
        <br>
        <br>

        <a href="locations.html">
          <li>LOCATIONS</li>
        </a>

      </ul>

    </div>

    <div id="d">

      

      <p><img class="float-image" src="https://www.w3schools.com/html/pic_trulli.jpg" style="width:400px;height:auto;">Then God said, Let the waters in the garden at the time of the sea and over the day and the lesser light to rule the day and the lesser light to rule the night - and the earth when they were created. In the day that you were naked? Have you eaten
        from the tree that is upon the earth. And it was very good. And there was evening and there he put the man and for his wife, and they knew that they were created. In the day and over the birds of the trees in the garden. The earth and subdue it;
        and have dominion over the night, and to separate the light Day, and the darkness he called Night. And there was no one to till it and keep it. To the woman he said, I will greatly increase your pangs in childbearing; in pain you shall bring forth
        children, yet your desire shall be for signs and for seasons and for seasons and for days and years. The earth brought forth vegetation: plants yielding seed of every kind: cattle and creeping things and wild animals of the heavens and the earth
        and subdue it; and have dominion over the night, and to separate the day from the garden of Eden he placed the cherubim, and a sword flaming and turning to guard the way to the tree of life.<br style="clear: both;" /></p>


      <img src="images/logo_on_cup_1.png" style="width:400px;height:auto;">

    </div>
  </div>
</body>

</html>

This appears not to wrap the text around the second image. – A Haworth Sep 13 '22 at 06:43 — A Haworth, Sep 13 '22 at 06:43

How do I wrap text around two images in HTML/CSS?

2 Answers2