Question

I have several boxes containing the following!

<div class="box">
  <div class="image">
    <img src="anything.png" /> <!-- The width is dynamic -->
  </div>
  <div class="box-text">
    <h2>Some Title</h2>
    <p>Lorem ipsum ...</p>
  </div>
</div>

The problem is that the text floats to the left after the image. I want it to go straight down, as I’ve marked it in the following image:

---

---

This is the way it should look like:

I do not want to use tables or javascript. I can’t use margin-left for the box-text, because the width of the image is dynamic.

Thanks for your contribution!

Answer 1

Do not use tables, but make the <div>s act like the cells of a table, then make the inline content vertically aligned to the top:

​.box{display:table}
.image{display:table-cell;vertical-align:top;}
.box-text{display:table-cell;vertical-align:top;}

Check it here