Two cells fluid, one fixed

Can't seem to do it . . . has anyone else?

[MatthewHSE]

I've got a table (for tabular data!) that has three columns. The two left columns need to be fluid, but the far right column needs to be a fixed width. I've been able to get it to work okay in Mozilla by just setting the width of the fixed-width cell. But when the two fluid cells don't contain enough text to stretch to 100% (minus the width of the fixed-width cell), IE just expands the fixed-width cell to a seemingly-random width.

Here's the code:

<td>Column 1</td>
<td>Column 2</td>
<td style="width: 180px;"><div style="height: 100px; width: 180px; overflow: auto; border: 2px inset #a9a9a9;">The content that goes in here will almost always overflow the boundaries of this div.</div></td>

Any ideas, anyone? I need that fixed-width cell to STAY the fixed-width, regardless of what the other cells are doing. How can that be done, so it will work in IE?

Thanks,

Matthew

[DrDoc]

<table width="100%">
<tr>
<td>some text</td>
<td>some text</td>
<td width="180">fixed width</td>
</tr>
</table>

[MatthewHSE]

Thanks DrDoc, but that doesn't do it. I don't know why, but it just doesn't work. The fixed-width cell simply expands to about 25% more than what it should be. I've tried all kinds of things, like setting the fixed-width cell to 180 (desired width), using the style tag to set the width, and even setting the width to 1% (it has a 180px div inside, which should stretch it out).

I even tried setting each of the cells to a fixed width, with the far right cell being 180. Even that didn't do it.

The thing is, I tried to force the fluid cells to expand to their full allotted width, by adding a long row of text to them. The idea was to make the fixed-width cell pushed over to its correct size. This didn't work either; the long line of text just wrapped in the fluid cell without forcing it any wider.

I've just about decided that IE won't do what I want it to do in this case. Just another example of how bad IE really is. (A year ago, I never would have believed I'd say that!)

But if anyone has any other ideas . . .

I'm using a strict doctype, and the browser is in standards-compliance mode.

[Rincewind]

I have found that if you define a size one column, then you have to set a size in every column. So set the two flexable cells to width="50%". However, some browsers treat the 180px fixed size as a maximum rather than a minimum. So the fixed column srinks to the size of it's content(the width of the word "fixed"). If you try to reduce the width of the flexable columns so that the page apears correct, eg set thier width to 30%, then on large width screens two flexable columns take up 60% and the remaining 40% is taken by the fixed column, even if the 40% is larger than the 180px. So the fixed column is streaching. The only solution I have found is to use a space gif to hold the fixed column out to the correct size and set the flexalbe columns to a equil % size that adds up to 100 or more. Try this code:

<table width="100%"> 
<tr> 
<td width="50%">some text</td> 
<td width="50%">some text</td> 
<td width="180px">fixed width<br>
<img src="http://....trasparent.gif" width="180px" height="1px" alt=" "></td> 
</tr> 
</table>

[tedster]

Ricewind - that's the same solution I've used on occasion. It seems to work well.

That transparent gif is also a nice work-around for IE's lack of support for min-width in many other non-table situations.