Fixed left-sidebar and footer (part of fixed positioning)

Code

<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed left-sidebar and footer</title>
<style type="text/css">
 body{
  margin:0;
  padding:0 0 footer-<length> left-sidebar-<length>;
 }
 div#left-sidebar{
  position:absolute;
  top:0;
  left:0;
  width:left-sidebar-<length>;
  height:100%;
 }
 div#footer{
  position:absolute;
  top:0;
  left:left-sidebar-<length>;
  width:500%;
  height:footer-<length>;
 }
 @media screen{
  body>div#left-sidebar{
   position:fixed;
  }
  body>div#footer{
   position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>
<div id="left-sidebar"> left-sidebar </div>
<div id="footer"> footer </div>
<div id="content"> content </div>

Related examples

One or two columns

Special examples

Note

This example is part of a weblog entry and is made by Anne van Kesteren and Arthur Steiner.

A lot more combinations are possible, of course, but it would become impossible to create and list them all. After you understand the theory, you will be fine.