Question

I have two div elements, one is the left panel, that is hidden, and collapse/expand accordingly it’s needed. In the right I have another div that has to be pushed containing an iframe, this iframe hast to fill all the screen or remaining of the screen. Right now the left div is pushing my right div down.

Here is the code that I have, the red border represents my left panel (collapse/expand). And the one with the iframe represents the right.

Can you help me please, so the left panel pushes the other panel horizontally and the right panel adjust to fit the window accordingly.

Answer 1

First I don’t think widow width dependent scripts are the best to fiddle out.

Second, avoid CSS height:100% like the plague… it doesn’t work well, you could pass window.height() into a variable and set them with jQuery.

Third, you might want to target the iframe as well as the outer div.

http://jsfiddle.net/eteich/cZjMR/8/