HTML layout design - need better approach

Question

I have to design a layout for my project. There are arrangements of divs, upper Div, lower Div, fixed height, scrolling etc. It is difficult to describe the problem in words, hence I have attached an image below. Please refer the screenshots.

What I want to achieve is to arrange panels with respect to the overall height of the browser window. Pink module is absolute positioned at the bottom of the parent Div. Upper Div is precious sibling of pink Div and it contains panels. when browser is resized scrollbars should not appear in UpperDiv. Instead panels should show scroll (show in second). It can be done using HTML and CSS and not at all I am hesistant using javascript or jquery. I appreciate any of your approach in doing this. Many thanks.

Sorry I couldn't made HTML properly. Currently my html shows scroll in upperDiv (instead scroll should appear in panels). Here I have created a fiddle. Please check. here

Answer 1

I can't think of a much better way than, after page load, setting the dynamic section's height.
And to handle the resize, we can just bind the same function with JQuery.

http://jsfiddle.net/N3HWz/7/

Answer 2

Made some changes to the CSS, hope this is kinda what you are looking for.

http://jsfiddle.net/vCVUL/embedded/result/

Regards.

Answer 3

You could use ExtJS for this. Have look at the demo page. There you find "Layout Managers" how will do the job for you.