CODEWITHSUNDEEP
htmlcssimage
JimmB
JimmB

Reputation: 25

Making an Image Responsive Within a Responsive Div?

I have a div (or section) within a webpage that is meant to contain a responsive image on the right with text on the left that wraps around the image. I achieved this pretty easily with the following HTML:

<div class="about">
      <h2>About</h2>
        <img class="about-image" src="example-image.jpg">
          <p>Lorem Ipsum...</p>
</div>

And then this CSS for the div:

.about {
  background-color: #ffffff;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  width: 80%;
}

Plus this CSS for the image itself:

.about-image {
  float: right;
  margin-left: 20px;
  width: 50%;
}

This places the image on the right side at 50% of the div's width, and allows the text to sit on the left side (with some padding) and then wrap around the image as needed. This was looking great on my laptop and when I dragged the browser to smaller sizes...

The problem, though, is that when I previewed this on a larger desktop computer's browser window, the 'about' div's width expanded and so the text suddenly didn't extend below the image anymore. It only extended to about 2/3 of the way down the image.

And since the div's height is based on the text, the div container stopped and the image kept extending vertically below the container. This looks terrible, and for the life of me I can't figure out how to fix it.

I see all kinds of posts talking about making images responsive within a div (where it seems the div needs to be assigned a height). But since I want the div to also be responsive, then I'm not sure how to make the image keep responding in relation to changes in the responsive div itself.

I've tried a bunch of things unsuccessfully, but I'm sure this must be possible (and in fact, it should be easy). Any help will be much appreciated!

Upvotes: 0

Views: 42

Answers (1)

Ori Drori
Ori Drori

Reputation: 192607

Add display: flow-root; to the .about element:

body {
  background: lightblue;
  margin: 0;
}

.about {
  display: flow-root;
  background-color: #ffffff;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  width: 80%;
}

.about-image {
  float: right;
  margin-left: 20px;
  width: 50%;
}
<div class="about">
  <h2>About</h2>
  <img class="about-image" src="https://picsum.photos/id/237/200/300">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor sagittis libero eget tempor. Nunc venenatis sed libero sed aliquam. Mauris varius, augue ac consectetur laoreet, libero urna iaculis turpis, a volutpat lorem enim at dui. Aliquam erat volutpat. Fusce viverra mauris sed augue luctus, malesuada maximus felis cursus. Cras libero lacus, egestas sit amet elit ultrices, bibendum euismod nunc.</p>
</div>

Upvotes: 0

Related Questions