As mentioned yesterday, I’ve been looking to do a not to complicated layout in HTML that I’ve nearly verified to be impossible – I think I could do it with some Javascript to put the finishing touches on it, but needing Javascript to ensure my site doesn’t look like garbage doesn’t seem like a wise path.
The target was a frameless version of this layout. Left panel is a fixed width, and the full height of the screen (variable). The header is fixed height, with a variable width that fills the remainder of the available space. The content panel should be of variable height and width, filling whatever rectangle isn’t used by the other 2, but should not exceed the height of the window – the pane should scroll to show the rest of the content.
Community suggestions were well-intentioned but fruitless. Browsers seem to completely disrespect my pleas of height=”100%” or even max-height=”100%” – like I was joking or something. This site has the right idea, but it appears they’ve cheated by making their content pane full height – notice how the scrollbar extends through the header. The layout doesn’t seem that difficult – it’s trivial in frames. All that’s really needed is the concept frames has of weighted layout where an element with a height of * will take the rest of the available dimension (assuming all other dimensions are fixed width). Add that to CSS and tables and your set. Why is this so hard? I can make text blink, appear, or disappear when my mouse is over it. I can have text flow around inset panels of info… why not a simple, non-frames, non-vertical scrolling layout?
Rob's Blog - Technology, Atlanta, Startups and Stuff 
Don’t let the other guys who work at my company hear it: use a TABLE.
One table with one TR and two TDs, one for the left pane, one for the right pane.
You can do the same with DIVs, but its more complicated. There are tutorials around.
I’m well aware of tables. In fact, I think they’re more straightforward for general layout than the CSS mish-mash.
The question still remains – I challenge you to find a table layout that does what I describe, what I link to. Remember, top pane – fixed height, left pane – fixed width, content pane fills the rest of the screen but no more, and scrolls to show content that doesn’t fit. Only the content pane scrolls.
Everyone has general suggestions, but nobody can point to a single site actually doing it, and the suggestions don’t work when you actually try them.
Have ytou thinking about using div with overflow or, even better, div with fixed position ?
Not only have I thought about using div with overflow, I’ve tried it. The problem is this – I want my layout to have a fixed height header with a variable height content area below (resize with window). Nothing can seem to convince browsers that I’d like the content area to stop at the bottom of the screen. height=”100%” actually goes too far, and height=px is fixed height – not what I’m after.
I’ve tried almost everything out there that seems to make remote sense. I want more than suggestions, I want proof – point me to a site that does it, then I’ll believe it can be done.
I read your blog entry and thought to myself, “hmmm…that doesn’t sound all that difficult…I do stuff like that all the time.” So a took a swipe at it and found it was actually a little harder than it originally seemed.
I did this with a TABLE, per your approach. I was surprised to find that IE actually does this much easier than Mozilla. Usually I write for Mozilla and then have to port to make stuff work right in IE.
I stuck a quick demo page up here. I tested in IE6…so let me know if it doesn’t work in IE5.x. It’s 3 parts: BasicLayoutManager.html, BasicLayoutManager.css, and BasicLayoutManager.js The JavaScript file does absolutely nothing in IE. You can remove it from the HTML document and this page will function just the same in IE using only CSS. Mozilla was being a pain in the ass, though, so I had to create a layout manager in JavaScript to get this to work right. It should maintain everything correctly, even with window resizing. You can download the whole thing in a zip file from here if you want to look at the code.
To do this with a TABLE, first set the margin to 0px and overflow to hidden on the BODY (hidden overflow removes the default scrollbar in IE). Make the table style width:100%; height:100%; Two rows: titlebar across the top with a colspan of 2, and a nav bar and content area in the bottom row.
Set the height style on the titlebar. Don’t set a height on the bottom row…that’ll force the browser to make it take up the remaining space in the browser. Set the width style on the nav-bar, but not on the content area for the same reason.
Then, stick a DIV inside the content area (TD) and make its style width:100%; height:100%; to take up all of the space in the containing TD. Set overflow:auto on the DIV and put your content inside there. Think of the DIV as a JScrollPane.
Browsers are very finnicky about setting an overflow style directly on a TD if the containing table doesn’t have a table-layout:fixed style (and even then, you may have cross-browser CSS issues). That’s why you need to embed a DIV inside your TD to get the scroll pane to work.
Anyway, I know you didn’t want to use JavaScript…like I said, only Mozilla needs it for this. I hope this helps a little.
Now that’s a good bit more impressive. I’ll have to dig into the guts of it a little bit to check out what you’ve done. I may tinker with it to try and get that left column full-height (that’s the target layout). I may also try and track down a minor glitch – in IE6, sometimes when I resize that design, a bottom scrollbar shows up. Still, it’s a really good start – thanks for pulling it together.
Not that I was able to count pixels on the screen but from the original html document you link to and the demo page, it appears that it works well with Mozilla Firefox 0.9.
FYI.
You’re pretty darn bold to chase after such an undoable feat since CSS, Javascript, HTML, DHTML are all evil and very hard to deal with.
Congrats!!!
:o)