How can I make a border-layout using css?

Question

I want to create a border layout for a web-app, where there is a fixed size header, footer, a sidebar, and the main center content that expands to fill the remaining space.

Think of it like your browser, where the toolbars and status-bar have a fixed size, the sidebar can change size, but the website in the center expands to fill the remaining size.

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 <div> tags to expand down to fill the space available, even if their contents aren't large enough to fill the space.

The web-browser 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 with CSS?

Answer 1

div { border : 1px solid #d3d3e3 }

#north    { margin:0;  padding:1em;  }        
#south    { margin:0;  padding:1em;  }        
#east     { margin:0;  padding:1em;  width:6em; height:22em; float:left; margin-right:1.1em }        
#west     { margin:0;  padding:1em;  width:6em; height:22em; float:right; margin-left:1.1em }        
#center   { margin:0;  padding:1em;  padding-bottom:0em; }        
#center:after    { content:' '; clear:both; display:block; height:0; overflow:hidden }

<div id="north">North</div >
<div id="east">East</div>
<div id="west">West</div>
<div id="center">Center</div>
<div id="south">South</div>

Live link: http://jsfiddle.net/marrok/dGw6K/2/

Answer 2

The CSS table layout can handle this nicely.

.borderLayout {
  display: table;  
  width: 100%
}

.borderLayout .top {
    display: table-row;
}

.borderLayout .left {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .center {
    display: table-cell;
    vertical-align: middle;
}

.borderLayout .right {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .bottom {
    display: table-row; 
}

JSFiddle