Strange behavior with image inside floated container

Question

Given this simple layout:

HTML

<div class="container">
  <div class="imgContainer">
    <img src="http://placehold.it/400x400">
  </div>
  <div>
    This should always stay to the right of the image.
  </div>
</div>

CSS

.container {
  height: 20vh;
}

.imgContainer {
  float: left;
  height: 100%;
}

img {
  height: 100%;
}

---

Issue #1

Chrome, Firefox, and Opera correctly display it like this:

IE11 incorrectly puts the text 400 pixels to the right, based on the natural width of the image:

---

Issue #2

As you increase the window's height, the text should stay glued to the right of the image. This works correctly in Firefox.

However, the text overlaps the image in Chrome and Opera:

---

See the behavior in this Fiddle.

Question: Is there a style I can add that will cause all browsers to behave consistently?

[Note: I discovered this while working on this question. I thought I had a solution, until I realized it wasn't responsive in any browser except Firefox.]

Answer 1

The following might do the trick.

Instead of using float, I would suggest using CSS tables.

Apply display: table to .container and set the height as needed.

For the two child elements, .imgContainer and .panel, use display: table-cell and inherit the height from the parent block.

I think this is pretty close to what you need, should work in all browsers (but I did not check...)

.container {
  height: 20vh;
  display: table;
}
.imgContainer, .panel {
  display: table-cell;
  height: inherit;
  vertical-align: top;
}
img {
  vertical-align:top;
  height: inherit;
}

<div class="container">
  <div class="imgContainer">
    <img src="http://placehold.it/400x400">
  </div>
  <div class="panel">
    This should always stay to the right of the image.
  </div>
</div>