DIVs RESIZE TD

Hello there.. :) This time Google didn't help me much on this:

There are several divs in a td, but only one of them is displayed at a time (display:inline), the other having display:none for style. It would be nice if the td (table) didn't resize when switching between divs, but keep the size of the first displayed div. Then, if a div was bigger it would become scrollable.


I tried lots of combinations of height, min-height, max-height, clientHeight, overflow:auto, table-layout:fixed, size capture on body load etc., but it didn't work out as planned..

Thanks for any advice.

Dani.

If you posted some code that got you close we might be able to tweak it.

OK.. Here is an experiment:

<table>
<tr>
<td>
<div id="div1" style="width:100;height:100;overflow:auto;display:none">
1<br>
2<br>
</div>
<div id="div2" style="width:100;height:100;overflow:auto">
% for my $i (1..20) {
<% $i %><br>
% }
</div>
</td>
</tr>
<table>

<script type="text/javascript">
function s() {
document.getElementById("div1").style.display = "inline";
document.getElementById("div2").style.display = "none";
}
</script>

<input type="button" value="Switch" onclick="return s()" />

There are 2 divs: div1 and div2 by their IDs. Each is set "width:100;height:100;overflow:auto", but only div2 is displayed. div2 contains the numbers from 1 to 20 each on a separate line, while div1 contains 1<BR>2. When the page loads div2 is indeed 100 x 100 with scroll bars to accommodate the long list. When I click the "Switch" button to display div1 instead and hide div2, div1 is resized to fit 1<BR>2 perfectly, being much less than 100 x 100.

If, on the other hand, I display div1 first it is 100 x 100. But when switching to div2 it gets more than 100 x 100 without scroll bars..

So.. Is it possible that the javascript code (switch) is faulty? or do I have to add smth.?

I just realized that this works fine in IE, while I'm usually using firefox..