Rearranging layout dynamically

I have a web application layout that consists of three basic panels:

_________________________
| | |
| | Panel B |
| Panel A | |
| | |
| | |
|-----------------------|
| Panel C |
| |
|_______________________|

I need Panel A to have fixed pixel dimensions, whilst Panels B and C fill the remaining space (no scrollbars). Currently this is achieved in the top two panels with a table row (yes, table layouts is bad, but it was (and is) the best solution as far as I know). The bottom row's height is set with a Javascript function that detects the available height, and then subtracts the height of Panel A. The function is executed onresize, also. (There is surely something wrong with CSS or my thinking if this is necessary for what I want.)

I want to have buttons in each panel that will swap it to the other side without a reload. For example, if the button in Panel C was clicked, C would move to the top, A and B would move to the bottom. If the button in Panel B was clicked, B would move to the left side, A would move to the right side, C would stay in its place.

This cannot be achieved with the current layout method, so I need to try and think of another method. One approach would be to use Javascript to determine the height and width of the screen, dynamically size Panels B & C, and absolutely position them. Changing their position would then only be a matter of changing their CSS positioning.

One of the panels contains an IFRAME which I would really prefer is not reloaded during the switch (it's quite vital to my application that it is not reloaded), therefore any methods that swap the innerHTMLs of two containers will not work.

What I want to know is what is the best method to achieve what I want? Is it absolutely positioning with Javascript-determined dimensions, or is there a better way?

Your problem does not have an easy solution and probably can't be answered in a simple post. I'll give you some things you can look into that might help you.

CSS has a layout feature and you can specify grid layout, with fixed heights and widths. I haven't used this in 5 years, so I'm not fresh enough to explain how it works, but i used it once when I positioned every element on the page statically.

There is another CSS hack you could use to do your columns. Column A will float left and be the entire width of your page, then set a negative right margin that is equal to the width of column B plus any padding you want to use to separate the two columns. Column B will float left, have a defined width, and a height of 100%. If done properly this can produce two equal height columns. Section C will then need clear:both set and you should be good to go.

If you want to use JavaScript to manage your content sizes, check out http://extjs.com. They have a free JavaScript layout manager that you can use or model your own after.

I would go with a CSS route using DIVs rather than tables.
DIVS can have their float style swapped using JS

The following was posted a while back and is really an eye-opener to what can be done:

http://homepage.mac.com/igstudio/design/js-dom-study/Ps-to-DIVs.html

Remember CSS is your friend!:)
Hope this helps.

D.