(no subject)
I want to create a page that has a table-like layout, with a fixed-height header and footer, a fixed-width menu down one side, and then most of the page taken up by a cell with variable height and width that takes up the rest of the available real estate. This one cell should get scroll bars of its own if the content is large enough, but the browser window should not get scroll bars. A cross-browser way of doing this would be great, but it only actually has to work for recent versions of IE. I've done things like this in the past using frames and javascript, but it feels like I shouldn't need those. It also feels like it shouldn't really be too hard, but I just haven't gotten it to work.
I first tried using a table and placing a div inside the scrollable cell (with 100% for height and width, and auto overflow for the scroll bars). I didn't have much luck with that: The cell and table seem to ignore the size I specify for them and get really big when the div contents get big, forcing scrollbars on the browser window.
So, next I tried using just divs. I don't really have a lot of experience with this approach, since I've usually used tables for grid-like layouts in the past. Still, I feel like I may have gotten closer than I did with the table approach. The scrollable cell still doesn't size the way I want, though. I'll include one of my attempts at this, using a simplified 2x2 grid. Hmm...I swear that looked much closer to what I want when I tried it in its own web page. Oh well.
I also really expected to find examples of this pretty easily online, but if they're at all common I must have been picking the wrong search terms. Anyway, all suggestions are welcome.
top left
top right
bottom left
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
b< br />b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b
b