I'm trying to build what I hoped would be a pretty straightforward CSS layout.
Inside the body I want a header that is always at the top.
I want a menu on the left. If the number of entries (<li> items) in the menu area grows long, I want it to overflow vertically so the user can scroll just the menu area. The menu width can be fixed, but the height of the viewing area may change and so I want it to "stretch" 100% tall.
The main content area is a larger area on the right side of the screen. I want the content to fill this area horizontally. This area cannot have a fixed width, it needs to grow and shrink as the browser is resized. It should also be 100% height and overflow as needed.
I did a little sketch of what I'm trying to do. The "pane" marker is a bit misleading now I see, but the bottom area is a div with id "pane" that encapsulates the menu and content divs and lives under the header div.
My current markup is simple as is the CSS and it's also completely fubared so I am not posting it at this time to avoid muddying the waters. I'm clearly screwing something up so I'd rather just get expert input on how to do this right rather than critique on how I'm doing it now :)
Thanks for any help!