Overflow cell in a table

[HaLo2FrEeEk]

I'm having an issue with a table. I know I'm supposed to use divs, but there is no easy way to do the layout that I needed to achieve with divs.

Basically I've got a table that has 5 rows displaying a description, address, phone, and fax, then one that acts as a spacer. Next to that, using a colspan, is a cell that contains an image. Now this image should be no more than 350px in width, so I've put a div in the cell with the image inside it and used width: 350px, overflow: hidden. I'm not wanting to limit the height, but therein lies my problem. If the image is taller than the maximum height of the table, then all the cells get stretched in height. I need a way to make an "overflow" cell that will take up the rest of the height from the image.

For example, if my table is only 200px in height without the image, assuming equal cell height, each cell would be 40px tall. If my image is 400px in height though, that would make the table 400px high, stretching the height of each of the cells to 80px. I'd rather add an empty cell at the bottom of the table that can stretch to take up the extra height from the image, without affecting the rest of my cells.

Is something like this possible? It seems like it should be, and I can't shake the feeling that it has to do with colspan and rowspan, but I just can't figure out how to do it.

Also, I'm on a deadline, so a quick reply will be VERY much appreciated.

[johny10151981]

<table cellpadding=10 cellspacing=10>
<TR height="30px">
<td>overflow</td>
<td>:</td>
<td>visible</td>
<td> <div style="overflow:visible;height:30"><!--<img src="hitler.jpg"/>--></td>
</TR>
 
<TR height="30px">
<td>overflow</td>
<td>:</td>
<td>hidden</td>
<td> <div style="overflow:hidden;height:30"><img src="hitler.jpg"/></td>
</TR>
 
<TR height="30px">
<td>overflow</td>
<td>:</td>
<td>scroll</td>
<td> <div style="overflow:scroll;height:30"><img src="hitler.jpg"/></td>
</TR>
 
<TR height="30px">
<td>overflow</td>
<td>:</td>
<td>auto</td>
<td> <div style="overflow:auto;height:30"><img src="hitler.jpg"/></td>
</TR>
 
<TR height="30px">
<td>overflow</td>
<td>:</td>
<td>inherit</td>
<td> <div style="overflow:inherit;height:30"><img src="hitler.jpg"/></td>
</TR>
</table>

if it give you any idea :)

[HaLo2FrEeEk]

Well like I said, I don't want to impose any height limits on the image. It won't ever be larger than 350px wide, but it can be any height. How will setting the overflow field on the div containing the image make a table row take up the extra slack?

[johny10151981]

Ok, Here is the deal try to understand what line 6 did.
First enable the image tag in line 6 and then disable all other image tag in the table. I hope you can get some idea on how to do it. Even if it dont help you. can you please give a snapshot or a sample diagram. It may help us to think more clearly

[HaLo2FrEeEk]

I know how to use the code you posted, I'm saying it's not what I need to solve my problem. Your code imposes a 30 pixel height limit. I do not want a height limit. If my table is 200 pixels high and I put an image that is 300 pixels high, I want to have a cell at the bottom of the table that will stretch the extra 100 pixels, leaving the other table cells intact. There is no way this is not possible. Maybe I just have to use multiple tables, with the information in 1 table and the image in the other.

[bushnellweb]

@johny10151981 - i realize this will be deleted for not actually applying to the question BUT, i think its hilar that you are using hitler.jpg as your image

[bushnellweb]

|-------------|--------|
|_____desc____|        |
|__address____|        |
|____phone____|  img   |
|_____fax_____|        |
|___spacer____|________|
 

is this what you table looks like? if so, then you can make it so that the spacer cell resizes with the img cell and the other cells stay in tact. if this is NOT what it looks like then post some code so we can help better

[johny10151981]

If you only notice the hitler not my message. Then this information for you.

At the same time i was reading an article about hitler and that image was immediately downloaded and that code was immediately created for the question as answer?