Hello guys,
I have been working on this issue since last 10 days. The screenshot of the problem is attached below.
http://i51.tinypic.com/14sp06a.jpg
The page opens in a new browser window whose dimension is small 800 X 600. The height of the yellow and green block should change with the change in browser's height. The height of the pink block should remain fix and should move up/down w r t when browser is resized.
So far I have achieved the following:
I have absolutely position the pink block to the bottom of the yellow block and it moves up/down. I cannot give fix height to the green block nor I can give in percentage since percentage does not work (Only 100% works) when browser is resized. I have given 100% and because of that it goes behind pink block and text content remains hidden behind it.
I have been working on this issue since 10 days. I have also tried javascript and jquery window onresize event handler but in that case the pink block changes it position inconsistently. Also client do not want css expressions to be used.
I have created demo htmls at the below location, to observe what is the peoblem -
http://www.particlepen.com/demo/demo.html
I am sure that this problem can be achieved by just html and css. Any help would be greatly appreciated.
Thanks
