View Full Version : DIVs RESIZE TD

08-08-2007, 11:04 PM
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.


08-09-2007, 02:14 AM
If you posted some code that got you close we might be able to tweak it.

08-09-2007, 06:05 PM
OK.. Here is an experiment:

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

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

<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..