Here is what I am trying to do:

Works great on my PC with IE 6...doesn't work with anything else.

You can click on the first 2 options of the top of menu 1 and the top option on menu 2 to get a feel of how it works.

Here is the code that I am using:

function getIFRAMEdocheight(theiframe, def_height) {
var IFRAMEref = frames[theiframe];
if (IFRAMEref)
return (typeof IFRAMEref.document.body != 'undefined' &&
typeof IFRAMEref.document.body.scrollHeight != 'undefined') ?
IFRAMEref.document.body.scrollHeight :
(typeof IFRAMEref.document.height != 'undefined') ?
IFRAMEref.document.height :


<iframe name="f1" frameborder="0" id="f1" width="143" height="100" scrolling="no" onload="f1.resizeTo(143,getIFRAMEdocheight('f1',600))" src="c4v5_f1.htm"></iframe>

I am a graphic designer and don't even know where to begin on this. I would like it to work in other browsers and on the mac.

I am also very open to suggestions of how to do this type of menu navigation without javascript. The 3 columns will be loading in php pages that will vary in lenght which is why I need them to dynamically resize, but I don't want the page to reload every click.