2 column layout with same height regardless of content, header + sticky footer

layoutdemo.css

/*css reset*/
html,body {position:relative;margin:0;padding:0;min-height:100%;width:100%;height:100%;}
div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td, figure {margin:0;padding:0;}
ol,ul {list-style:none;}
li {list-style-type: none;}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body {
  font-family: Helvetica;
	height: 100%; /*important for equal height columns*/
}

#wrapper{
	height: 100%; /*important for equal height columns*/
	padding-bottom:60px; /*This must equal the height of your header*/
}

#header{
	background-color: #222;
	height: 60px; /*This must equal padding bottom of wrap*/
	display:block;
	padding: 10px;
	color: #fff;
}

#main {
	position: relative;
	height: 100%; /*important for equal height columns*/
	width: 100%;
	overflow:auto;
	display: table; /* This is needed fo children elements using display table cell*/
	table-layout: fixed;
	padding-bottom: 80px; /*This needs to match footer height*/
	overflow: auto;
}

#side{
	background-color: #ccc;
	width: 200px;
	vertical-align: top;
	text-align: center;
	padding: 10px 0;
	display: table-cell; /*To make sibling columns equal in height*/
}

#side-stuff{
	display: block;
}

#content{
	background-color: pink;
	padding: 20px;
	display: table-cell; /*To make sibling columns equal in height*/
}

#content-stuff{
	width: auto;
	height: auto;
}

#footer{
	position: relative;
	height: 80px;
	margin-top: -80px; /* margin-top is negative value of height */
	clear: both; /* Use if floating elements */

	background-color: #222;
	color: #fff;
	padding: 10px;

}

layoutdemo.html

 <div id="wrapper">
 
	<div id="header">
		header content
	</div>

	<div id="main">

		<div id="side">
			<div id="side-stuff">
  			sidebar stuff
			</div>
		</div>

		<div id="content">
			<div id="content-stuff">
  			content stuff
			</div>
		</div>

	</div>
	
	<div id="footer">
		footer content
  	</div>
</div>

demo here: http://www.nanchu.me/layoutdemo

Hi Nan,
Can you tell me if there is a way of separating the "side" and "content" divs? I thought that would be easy to accomplish with margins, but I can't work it out for some reason... I'm using borders rather than background colors, so I do need space between those two.

Thanks so much for any advice!
Susanna

you are probably no longer reading your comments, but just so you know, this is brilliant and working a treat for me. sidebar+content+sticky footer = massive headache and hours of work for nothing. lifesaver.