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/