Making text fit on one line below image

[shawhey]

Hi, I am having a problem getting text to fit on a single line below my images when the text is too long. It seems quite simple, but I can't figure it out for the life of me. Here's a link showing the issue (as you can see, because the text below "White Oak Amaretto" is on two lines, the images are no longer aligned at the top): http://ezliquidators.1free.ws/products.php?mat=hardwood

 

It really wouldn't be much of a problem if the text continues to appear on two lines as long as the images stay aligned. That's the main concern. Here is the CSS:

 

#tile
{
width: 98%;
height: 98%;
padding: 1% 1% 0px 1%;
}
#tileinfo
{
padding-left: 10px;
padding-right: 10px;
display: table-cell;
}
td
{
width: 14%;
height: 14%;
}
table
{
width: 94%;
padding-left: 1%;
}

#dimension
{
margin-left: 10px;
padding-left: 70px;
padding-top: 0.1%;
margin-right: 20px;
height: 21px;
background: url(dimhead.png) no-repeat;
color: #252525;
}

 

The other thing I don't understand is that if there are fewer than 5 images to be shown, the images just take up the entire space, even though I've set the table cells at 14% width and height. Any help would be greatly appreciated.

 

Cheers,

 

Chahe

[cssfreakie]

ad to your td

 

vertical-align: top;

 

that should do the trick

 

td
{
width: 14%;
height: 14%;
vertical-align:top;
}

[shawhey]

Great, it worked! Cheers.

[cssfreakie]

Nice, please mark the topic solved   button left corner