ltw/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
    <title></title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=us-ascii" />
    <link href="main.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]>
    <link href="ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    <script src="sidebar.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function() {
        $(window).resize( setElementToFill );
        setElementToFill();

        $('#master_left button').click(toggleSidebar);
        $('#master_right button').click(toggleSidebar);
      });

      function setElementToFill() {
        $('.fillElement').height($(window).height() - $('#master_header').height() - $('#master_footer').height());
      }
    </script>
  </head>
  <body>
    <div id="master_header">
      Header Here
    </div>

    <div id="master_outer">

      <div id="master_clearheader">
        <!-- used to make room for the #master_header -->
      </div>

      <div id="master_left">
        <button></button>
        <div class="sidebar_content">
          <p>left sidebar here</p>
          <p>left sidebar here</p>
          <p>left sidebar here</p>
          <p>left sidebar here</p>
          <p>left sidebar here</p>
        </div>
      </div>

      <div id="master_middle">
      </div>

      <div id="master_right">
        <button></button>
        <div class="sidebar_content">
          <p>right sidebar here</p>
          <p>right sidebar here</p>
          <p>right sidebar here</p>
          <p>right sidebar here</p>
          <p>right sidebar here</p>
        </div>
      </div>

      <div id="master_clearfooter">
        <!-- used to make room for the #master_footer -->
      </div>
    </div>
    <div id="master_footer">
      Footer Here
    </div>
  </body>
</html>

## main.css
* {
  margin:0;
  padding:0;
  border:none;
  z-index:0;
}

html, body {
  height:100%;
}

body {
  font-family:arial, sans-serif;
  color:#000;
  font-size:82%;
  background:#CCC;
}

#master_header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:69px;
  line-height:69px;
  background:#000;
  color: #FFF;
  font-weight:bold;
  text-align:center;
}

#master_clearheader {
  height:69px;
}

#master_outer{
  min-height:100%;
  margin-left:200px;
  margin-bottom:-30px;
  margin-right: 200px;
  background:#FFF;
}

#master_left {
  position:relative;
  width:200px;
  text-align:center;
}

#master_left {
  float:left;
  z-index:100;
  margin-left:-200px;
  left:0px;
}

#master_left button {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 3px;
  right: 0px;
}

#master_middle {
  width:100%;
  float:left;
  position:relative;
  z-index:1;
  margin:0 -1px;
}

#master_right {
  position:relative;
  width:200px;
  text-align:center;
}

#master_right {
  float:right;
  z-index:100;
  margin-right:-200px;
  right:0px;
}

#master_right button {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 3px;
  left: 0px;
}

p {
  padding:15px 15px 0 15px;
}

#master_clearfooter {
  clear:both;
  height:45px;
}

#master_footer {
  width:100%;
  clear:both;
  height:30px;
  line-height:30px;
  background-color:#000;
  color: #FFF;
  font-weight:bold;
  text-align:center;
  position:relative;
}

.fillElement {
  position: absolute;
  top: 0px;
  width: 100%;
  overflow: scroll;
  margin-bottom: 150px;
}

## sidebar.js
function toggleSidebar(e) {
  var parent = $(e.target).parent()[0];

  var outer = $('#master_outer');
  var width = $(parent).css('width') == "200px" ? 27 : 200;

  if (parent.id == "master_left") {
    switch (outer.css('margin-left')){
      case "27px":
        $('#master_outer').animate({'margin-left': '200px'}, 500, function() {
          $(parent).css('margin-left', '-200px');
          $(parent).css('width', '200px');
          $(".sidebar_content", parent).show();
        });
        break;
      case "200px":
        $(".sidebar_content", parent).hide();
        $('#master_outer').animate({'margin-left': '27px'}, "slow");
        $(parent).css('margin-left', '-27px');
        $(parent).css('width', '27px');
        break;
    }
  }

  if (parent.id == "master_right") {
    switch (outer.css('margin-right')){
      case "27px":
        $('#master_outer').animate({'margin-right': '200px'}, 500, function() {
          $(parent).css('margin-right', '-200px');
          $(parent).css('width', '200px');
          $(".sidebar_content", parent).show();
        });
        break;
      case "200px":
        $(".sidebar_content", parent).hide();
        $('#master_outer').animate({'margin-right': '27px'}, "slow");
        $(parent).css('margin-right', '-27px');
        $(parent).css('width', '27px');
        break;
    }
  }
}
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
	<title></title>
	<meta http-equiv="Content-Type"
	content="text/html; charset=us-ascii" />
	<link href="main.css" rel="stylesheet" type="text/css" />
	<!--[if lte IE 6]>
	<link href="ie.css" rel="stylesheet" type="text/css" />
	<![endif]-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
	<script src="sidebar.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function() {
	$(window).resize( setElementToFill );
	setElementToFill();

	$('#master_left button').click(toggleSidebar);
	$('#master_right button').click(toggleSidebar);
	});

	function setElementToFill() {
	$('.fillElement').height($(window).height() - $('#master_header').height() - $('#master_footer').height());
	}
	</script>
	</head>
	<body>
	<div id="master_header">
	Header Here
	</div>

	<div id="master_outer">

	<div id="master_clearheader">
	<!-- used to make room for the #master_header -->
	</div>

	<div id="master_left">
	<button></button>
	<div class="sidebar_content">
	<p>left sidebar here</p>
	<p>left sidebar here</p>
	<p>left sidebar here</p>
	<p>left sidebar here</p>
	<p>left sidebar here</p>
	</div>
	</div>

	<div id="master_middle">
	</div>

	<div id="master_right">
	<button></button>
	<div class="sidebar_content">
	<p>right sidebar here</p>
	<p>right sidebar here</p>
	<p>right sidebar here</p>
	<p>right sidebar here</p>
	<p>right sidebar here</p>
	</div>
	</div>

	<div id="master_clearfooter">
	<!-- used to make room for the #master_footer -->
	</div>
	</div>
	<div id="master_footer">
	Footer Here
	</div>
	</body>
	</html>
	* {
	margin:0;
	padding:0;
	border:none;
	z-index:0;
	}

	html, body {
	height:100%;
	}

	body {
	font-family:arial, sans-serif;
	color:#000;
	font-size:82%;
	background:#CCC;
	}

	#master_header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:69px;
	line-height:69px;
	background:#000;
	color: #FFF;
	font-weight:bold;
	text-align:center;
	}

	#master_clearheader {
	height:69px;
	}

	#master_outer{
	min-height:100%;
	margin-left:200px;
	margin-bottom:-30px;
	margin-right: 200px;
	background:#FFF;
	}

	#master_left {
	position:relative;
	width:200px;
	text-align:center;
	}

	#master_left {
	float:left;
	z-index:100;
	margin-left:-200px;
	left:0px;
	}

	#master_left button {
	position: absolute;
	width: 20px;
	height: 20px;
	margin: 3px;
	right: 0px;
	}

	#master_middle {
	width:100%;
	float:left;
	position:relative;
	z-index:1;
	margin:0 -1px;
	}

	#master_right {
	position:relative;
	width:200px;
	text-align:center;
	}

	#master_right {
	float:right;
	z-index:100;
	margin-right:-200px;
	right:0px;
	}

	#master_right button {
	position: absolute;
	width: 20px;
	height: 20px;
	margin: 3px;
	left: 0px;
	}

	p {
	padding:15px 15px 0 15px;
	}

	#master_clearfooter {
	clear:both;
	height:45px;
	}

	#master_footer {
	width:100%;
	clear:both;
	height:30px;
	line-height:30px;
	background-color:#000;
	color: #FFF;
	font-weight:bold;
	text-align:center;
	position:relative;
	}

	.fillElement {
	position: absolute;
	top: 0px;
	width: 100%;
	overflow: scroll;
	margin-bottom: 150px;
	}