Remove Float left in web

Issue

So I want to make the sentence not float left when it exceeds the image. Here is the result

enter image description here

.content {
  background-color: yellow;
  padding: 20px;
  float: left;
  margin-bottom: 20px;
}

img {
  max-height: 150px;
  width: auto;
}

.image {
  float: left;
  margin-right: 20px;
  height: 100%;
}
<div class="container">
  <div class="content">
    <div class="image">
      <img src='https://img.freepik.com/free-photo/man-using-digital-tablet-psd-mockup-smart-technology_53876-110815.jpg?t=st=1652829422~exp=1652830022~hmac=e98e39d49f85486606e11eb17537e7b7c7cd562cc5c0f9fb743b4b15cc183eba&w=1380'></img>
    </div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ducimus commodi explicabo rem debitis placeat natus possimus nostrum aliquid aperiam.
    <br><br> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error, officia. Placeat illo tempora consequuntur repudiandae quasi sit delectus soluta. Recusandae deserunt aliquid reprehenderit asperiores enim quo itaque, nisi aut voluptatum odio
    est cum laudantium eos vitae. Id voluptatibus temporibus mollitia libero dolore suscipit laudantium autem molestiae placeat. Optio quod dolorem, placeat autem nisi eius facilis necessitatibus non quasi, reprehenderit nemo enim! Saepe veniam, rem ut
    distinctio facilis eaque enim deserunt?
  </div>
  <div class="content">
    <div class="image">
      <img src='https://img.freepik.com/free-photo/man-using-digital-tablet-psd-mockup-smart-technology_53876-110815.jpg?t=st=1652829422~exp=1652830022~hmac=e98e39d49f85486606e11eb17537e7b7c7cd562cc5c0f9fb743b4b15cc183eba&w=1380'></img>
    </div>
    <div class="sentence"></div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dignissimos nisi soluta excepturi aliquid accusantium assumenda, ex inventore. Deserunt dolores, dolorum quibusdam eligendi perspiciatis similique vel possimus officia sint repellat omnis
    reprehenderit suscipit deleniti id asperiores quidem accusamus natus blanditiis!
    <br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quibusdam necessitatibus quas? Consequatur repellendus non nam at eos, quaerat dolore asperiores amet id et facilis quae earum facere, eveniet quo. Vero perferendis dolorum nulla
    labore ratione tempore vel! Culpa laudantium tempora saepe minus fugiat illo quis esse. Exercitationem, aspernatur doloribus?
    <br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptate iste, sint itaque cumque eaque minus impedit exercitationem architecto! Dolorum eum necessitatibus quidem repellat nam deleniti reprehenderit quos dicta, architecto cupiditate
    neque, excepturi autem adipisci sint officiis sapiente. Quisquam ipsa delectus laboriosam est magni. Quisquam, laudantium! Aut id repellat nisi accusantium recusandae dolore labore! Harum quia accusantium dolorum officia provident quis vel repellat
    eos corporis? Provident, aliquam eius dolores quibusdam ipsum eum, quo molestiae dolore, harum nihil perferendis! Incidunt quod sit ipsa qui eius, quas nihil fugiat temporibus odit repellat! Lorem ipsum dolor sit amet consectetur adipisicing elit.
    At odit omnis excepturi ratione incidunt doloremque porro nobis magnam quia quasi.
  </div>
</div>

Does anyone know how to make the sentence stay in red line position?

Solution

Use a grid.

.container {
  background-color: yellow;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2em;
  padding: 2em;
}

.container>* {
  border: 1px dotted red;
}

img {
  max-width: 100%;
}
<div class="container">
        <div class="left-col">
            <img src='https://img.freepik.com/free-photo/man-using-digital-tablet-psd-mockup-smart-technology_53876-110815.jpg?t=st=1652829422~exp=1652830022~hmac=e98e39d49f85486606e11eb17537e7b7c7cd562cc5c0f9fb743b4b15cc183eba&w=1380'></img>
        </div>
        <div class="right-col">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ducimus commodi explicabo rem debitis placeat natus possimus nostrum aliquid aperiam.
        <br><br>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error, officia. Placeat illo tempora consequuntur repudiandae quasi sit delectus soluta. Recusandae deserunt aliquid reprehenderit asperiores enim quo itaque, nisi aut voluptatum odio est cum laudantium eos vitae. Id voluptatibus temporibus mollitia libero dolore suscipit laudantium autem molestiae placeat. Optio quod dolorem, placeat autem nisi eius facilis necessitatibus non quasi, reprehenderit nemo enim! Saepe veniam, rem ut distinctio facilis eaque enim deserunt?
        </div>
        <div class="left-col">
            <img src='https://img.freepik.com/free-photo/man-using-digital-tablet-psd-mockup-smart-technology_53876-110815.jpg?t=st=1652829422~exp=1652830022~hmac=e98e39d49f85486606e11eb17537e7b7c7cd562cc5c0f9fb743b4b15cc183eba&w=1380'></img>
        </div>
        <div class="right-col">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dignissimos nisi soluta excepturi aliquid accusantium assumenda, ex inventore. Deserunt dolores, dolorum quibusdam eligendi perspiciatis similique vel possimus officia sint repellat omnis reprehenderit suscipit deleniti id asperiores quidem accusamus natus blanditiis!
        <br><br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quibusdam necessitatibus quas? Consequatur repellendus non nam at eos, quaerat dolore asperiores amet id et facilis quae earum facere, eveniet quo. Vero perferendis dolorum nulla labore ratione tempore vel! Culpa laudantium tempora saepe minus fugiat illo quis esse. Exercitationem, aspernatur doloribus?
        <br><br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptate iste, sint itaque cumque eaque minus impedit exercitationem architecto! Dolorum eum necessitatibus quidem repellat nam deleniti reprehenderit quos dicta, architecto cupiditate neque, excepturi autem adipisci sint officiis sapiente. Quisquam ipsa delectus laboriosam est magni. Quisquam, laudantium! Aut id repellat nisi accusantium recusandae dolore labore! Harum quia accusantium dolorum officia provident quis vel repellat eos corporis? Provident, aliquam eius dolores quibusdam ipsum eum, quo molestiae dolore, harum nihil perferendis! Incidunt quod sit ipsa qui eius, quas nihil fugiat temporibus odit repellat! Lorem ipsum dolor sit amet consectetur adipisicing elit. At odit omnis excepturi ratione incidunt doloremque porro nobis magnam quia quasi.
        </div>
</div>

Answered By – Brett Donald

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.