Raw File
fixed.css
/* Magic to do 'frames' from CSS.
 * 
 * (c) Stian SĀ½iland <stian@soiland.no> 2004
 * 
 * Parts of this file is copied freely from
 * the site http://devnull.tagsoup.com/fixed/
 * Many thanks to Eric Bednarz <devnull@tagsoup.com>
 *
 * You may use/modify/distribute/etc this source for free as long as you
 * keep the above copyright notices. 
 *
 * Essentially the trick is to make body only 100% high (ie. the screen
 * size), and then place div-boxes out where you want your "frames".
 * 
 * This allows fixed positioning even in Microsoft IE, as we can use
 * position: absolute for elements directly within body.
 * 
 * See the file fixed_ie.css for details on IE compatibility
 * hacks.
 * 
 */
body {
  margin: 0;
}

div.left,div.bottom,div.top {
  position: absolute;  
  margin: 0;

  /* Debuglines */
  /*  border: 1px dotted #aaa;*/

  /* If scrolling is needed: */
  overflow: auto; 
}
div.left {
  /* Placed on the left side */
  top: 0;
  left: 0;
  /* Width of left */
  width: 10em;
  height: 100%;
}
div.left div {
  position: static; 
  /* Restore to normal values */
  width: auto;
  height: auto;
}

div.bottom  {
  /* Placed in the lower part */
  bottom: 0;
  /* Don't overlap the left-side */
  left: 10em;
  /* Full width, this doesn't work completely with IE, but see
     fixed_ie5.css for details. */
  right: 0;
  /* Height of bottom part */
  height: 15%;
}
div.bottom div {
  /* Reset to normal values */  
  left: 0;
  right: auto;
  height: auto;
}

div.top {
  /* In effect the rest of the screen, the main part if you like.  */
  top: 0;
  /* width of .left */
  left: 10em;
  right: 0;
  /* 100% - height of .bottom  */
  height: 85%;
}
div.top div {
  /* Reset to normal values */  
  position: static; 
  left: 0;
  right: auto;
  height: auto;
}

/* This trick is to fix something i IE 5 on Mac..  */
@media screen {
  body>div.left,body>div.bottom,body>div.top {
    position: fixed;
  }
}
back to top