How to prevent text from wrapping a floated image when it grows?

Question

How can I align text with an image if even if the text is longer than the image?

The words "comfort and hope" are not aligning with the rest of the text right of the image.

<style>
    .left { float: left; margin: 0em .5em .5em 0; padding-top:5px; padding-left:5px; }
    .right { float: right; margin: 0 0 .5em .5em; }
    .text {margin-right: 15px; padding-bottom: 10px; padding-top:5px;}
    table, th, td {padding: 0px; border: 4px solid white; background-color:#e5e5e5; height:150px; width: 620px}
</style>

<td><a href="/grief-loss/"><img src="/uploads/2013/07/grief-loss.png" width="99" height="123" class="left"><div class="text"><b>Grief, Loss & End of Life Issues</b></a><br> The loss of a loved one can be life changing.  Grief is a difficult and continual journey in which additional support can provide comfort and hope.</div></td>
</tr>

How do I achieve this?

Answer 1

You could add overflow property with a value different than visible to the .text div element in order to prevent the content from wrapping the floated image.

Example Here

.text {
    overflow-x: auto; /* or hidden; */
    /* overflow property would create a new block formatting context         */
    /* https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context */
}

---

Or float the .text element to left as well as the image (As @MrAlien suggested), make sure you assign some width to the floating elements. (Example here)

---

Alternatively, you could set a left margin (>= width of the floated image) to the .text element:

.text {
  margin-right: 15px;
  padding-bottom: 10px;
  padding-top:5px;
  margin-left: 110px; /* <-- Added margin */
}

Updated example.

Answer 2

Use inline-block instead of floating

.img, .copy { display: inline-block; vertical-align: top; padding: 0 0.5em; max-width: 100px }

<div class="img">My Image</div>
<div class="copy">This is my long area of copy that is taller than the height of the image.</div>

http://jsfiddle.net/tCQ26/