Create image with text above, with variable wrapper width

Question

Consider the following requirement for an html/css page:

A wrapper containing an image and text above the image (both within the wrapper)
The text could contain a link
The height of the wrapper is a percentage of its containing element, say 20%
The height of the image should be the height of the wrapper minus the height taken by the text above it. The length of the text is unknown at the time of coding.
The width of the image should be auto, to maintain aspect ratio
The width of the wrapper should be equal to the width of the image
The width of the text div should not exceed the width of the image. If the text is longer, the text should wrap on multiple lines

I have produced the following code, which works alright if the text is short, not exceeding the width of the image. But it doesn’t work if the text is longer (the text does not wrap and the width of the text div exceeds the width of the image). What would be a good solution for this?

<html>
<head>
  <style>
  html, body {
    height: 100%;
  }
  .wrapper {
    border: 2px solid red;
    display: inline-block;
    height: 20%;
  }
  img {
    width: auto;
    height: calc(100% - 1em);
    display: block;
  }
  .contents {
    font-size: 1em;
    line-height: 1em;
  }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="contents">This is some text with unknown length with a <a href="#">link</a>.</div>
  <img src="http://via.placeholder.com/150x150" />
</div>
</body>
</html>

Answer 1 · 2017-08-28T09:33:16Z

August 28, 2017 9:33am

Hi Michiel,

Although the task looks a little confusing, you should be able to solve your issue by giving the wrapper a width, and also preventing overflowing.

max-width: 100px;
overflow: hidden;

Welcome to the Treehouse Community

Looking to learn something new?

Michiel Visser

Michiel Visser

Create image with text above, with variable wrapper width

1 Answer

Flor Antara

Flor Antara

Michiel Visser

Michiel Visser