How can I make a border-layout using css?

Question

I want to create a border layout for a webapp, where there is a fixed size header and footer, a sidebar and a main center content that expands to fill the remaining space. Think of it like your browser, where the toolbars and statusbar have a fixed size, the sidebar can change size, but the website in the center expands to fill the remaining size.

edit: To clarify, I want to specify the height of the entire design in pixels, for example 600px. Then I want the sidebar and the center divs to expand down to fill the space available, even if their contents aren't large enough to fill the space. The webbrowser analogy can be used here too. Even if the page you are looking at in the browser isn't taller than the browser window, the browser doesn't resize.

Is there any way to do this in css?

Answer 1

Lots of them. The complexity depends on whether do you want the footer to be glued to the bottom even if there's not enough content. Here are some examples for you: http://www.dynamicdrive.com/style/layouts/category/C12/

Answer 2

The method you refer to sounds like a job for footer stick - this is old already, but works a charm still ... the man in blue - footerStickAlt

Similar question here.

And I'm sure if you use the same criteria in that question and the question linked in that to run a search, you'll come up with more.