Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: not2easy
Header - banner, usually with tables, I set it up so that there is also a repeating bg-image so that different size browsers can scale the page
Text - content, scalable to 100% of the page, minus the height of the header and footer, top and bottom accordingly.
Footer - usually a repeating background image with small images on left and right side that link side column bg-images with bottom bg-image. Same process repeated on the top.
Basicly, frame-like borders around top, bottom, left, and right sides, with scrollable content area is what I'm looking for. I dont know if I explained that right, but let me know if you think you have an idea of how to get this to work. Thanks. Feel free to im me, my AOL IM sn is n00ge.
What you describe is indeed a tricky layout, especially if it's intended to be cross-browser compatible.
Unfortunately it's not (at least not yet, but future CSS plans are promising) as easy to do this as it is with tables. Then again, tables have been around much longer :)
Still, using the basic "table thinking" works here as well.
First of all, you want the total height to be 100%, right? Say that the header and footer are each 20%. That leaves 60% for the rest of the page.
Now, as you may have noticed... you wouldn't be able to only define a height for the header and footer, and make the "text" section fill in the gap.
Using a wrapping div is a possible solution.
Again, this only works as long as the content doesn't expand beyond 100%... in which case the footer would overlap some text - not pretty. Also, 100% height is interpreted differently in the different browsers.
So, the only water proof solution, for right now, is to use tables...
So you could use overflow:scroll on the central div.
That way if it gets too big it will gain a scrollbar (a lot like a frame).
If thats okay then try something like..
Seems to work more or less.
edit: code correction