Html, table, img & css - how to get text to wrap correctly?

Question

I've got the following code; however it's not given me the desired result - what I am after is as per the image below, what am I doing wrong?

<style>
table.control_grid tr {
    text-align: center;
    width: 200px;
}
table.control_grid td {
    width: 120px;
    height: 48px;
}
table.control_grid a {
    text-decoration: none;
}
table.control_grid img {
    vertical-align: text-top;
}
</style>

<table class="control_grid">
    <tr>
        <td><img width="48" height="48" src="icon1.gif">My text & stuff, overflow??</td>
        <td><img width="48" height="48" src="icon1.gif">Icon1</td>
        <td><img width="48" height="48" src="icon1.gif">Icon2</td>
        <td></td>
        <td></td>
    </tr>
</table>

Desired result:

Answer 1

one thing you've missed, close the img tag like this(and don't forget the alt attr :) )

<img width="48" height="48" src="icon1.gif" alt="" />

Above code is xhtml compliant

Answer 2

You should float the images.

float:left;

Answer 3

Try adding the following CSS:

table { table-layout: fixed; }

This triggers the ‘fixed table layout algorithm’, in which the horizontal layout only depends on the table’s width and the width of the columns, not the contents of the cells.

Apart from fixing your problem, this improves performance as well: a fixed table layout allows browsers to render the table faster than the automatic table layout, because the browser can begin to display the table once the first row has been received.

Answer 4

Use like this for your desired output :

<table class="control_grid">
    <tr>
        <td align="left" valign="top"><img width="48" height="48" src="icon1.gif" align="left">My text & stuff, overflow??</td>
        <td valign="top"><img width="48" height="48" src="icon1.gif">Icon1</td>
        <td valign="top"><img width="48" height="48" src="icon1.gif">Icon2</td>
        <td></td>
        <td></td>
    </tr>
</table>