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

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

Answer 3

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.

Answer 4

try flexbox, works with firefox and webkit

http://www.html5rocks.com/en/tutorials/flexbox/quick/

the current implementation is not updated, but it is good enough

but you can probably do this with tables (that are similar to the flexbox)

hope this helps