Question

Consider the following markup:

<div id="container">
    <div id="top">
        <img />
    </div>
    <div id="bottom">
        Some text, there we go.
    </div>
</div>

<img> has fixed height. Width of top and bottom is dynamic. top‘s content may be wider than bottom‘s content and vice versa. I need to make it so that bottom‘s width is equal to top‘s width at all times.

Can this be done with pure CSS? Or is JS neccessary?

Answer 1

There is a way to do this via pure CSS (courtesy of Artem Polikarpov (in Russian))

<style>
  .ap-pic {
    display: table-cell;
    width: 1px;
  }

  .ap-pic .caption {
    display: block;
  }
</style>

<div class="ap-pic">
  <img src="pic.jpg">
  <span class="caption">long text that has to go on the next line blah blah blah</span>
</div>