Extremely hard html/css problem!!!

turgon

Im trying to design a html page for a program im making (an ajax powered file manager). Two parts to this, the first one is not a bother, but the second part is what causes problems. In this page there are no scroll bars at the side and the bottom. The only scroll bars are in the content area specified below.

Easy part
In the page I want an overall top bar (height 40px) two side bars each side (250px wide) and a central space that will adjust depending on the width of the browser. The height of the two sidebars must be 100% - the height of the top bar. Visually this amounts to the following:



Which is fine using tables with height: 100%, or other ways.


Very (very) hard part
Problems now arise with the central section. What I want here is two bars, the full width of the central section, and heights 40px and 80px respectivly. The rest of the central section then adjusts, again depending on the broiwser width and heights.

However, this bottom piece ("content area") is where the list of files will go. Thus, if the folder contains 100 files, a scroll bar must show up (overflow: auto), as seen below.



The problem is setting the content area's height. If no height is set the overflow property ceases to operatate, and the scoll bars wont appear. However a height cannot be designated because the content area must be as big the browser window minus the various bars to the top and sides. And using something like height: 90% wont work as all the other values for the other elements are in pixils.

Ive tried using tables, but they wont take overflow property.

Ive tried using divs, but the heights wont work.

Ive tried combinations, but the div refuse to take percentil heights based on their table containers.

Anyone any ideas???? I hope I have made myself clear!

Goodshape

I had a quick go and made this, using absolute positioning and specifying top/bottom/left/right positions.

http://michael.flanagan.ie/overflow.html

That the kind of thing you're after?

turgon

Thanks goodshape, your the man!!

The approach you used, setting for example top:0px and bottom:0px for a 100% high div never even occured to me.

Thanks again!!!

Goodshape

No worries, it's a nice little trick alright.

Not 100% sure about browser compatibility though. It might work fine, I just honestly don't know -- could be worth testing before you commit to it.

Firefox 3 here, and all is well.

safari here nd perfect..

turgon

Works in Firefox 3, IE 7 and Chrome on Vista!

S.M.B.

Not working on IE 7 here.