CODEWITHSUNDEEP
htmlcsshtml-table
Michael Pasqualone
Michael Pasqualone

Reputation: 2037

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

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:

Desired result http://mpasqualone.com/wantedResult.gif

Upvotes: 2

Views: 2209

Answers (4)

Karthik
Karthik

Reputation: 3281

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>

Upvotes: 0

Mathias Bynens
Mathias Bynens

Reputation: 149594

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.

Upvotes: 2

Patrick Hendricks
Patrick Hendricks

Reputation: 593

You should float the images.

float:left;

Upvotes: 2

Michael Mao
Michael Mao

Reputation: 10168

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

Upvotes: 1

Related Questions