• Prev.
• Next

fixed positioning (ie6 hack)

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they are similar to fixed background images. For paged media (where the content of the document is split into one or more discrete pages), boxes with fixed positions are repeated on every page. This is useful for placing, for instance, a signature at the bottom of each page. Boxes with fixed position that are larger than the page area are clipped. Parts of the fixed position box that are not visible in the initial containing block will not print.

How to mimic position:fixed in Internet Explorer 6:

Via a CSS expression

/* 
 * there is no need to use a real image here
 * anything will do :) 
 */
 * html {
   background: url(css-101);
 } 
 #footer {
   position: fixed;
   bottom: 0;
   _position: absolute;
   _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') 
	 ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) 
	 : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
 }

Be aware that CSS expressions are evil.

Via "markup"

CSS:

html, 
body {
     padding:0;
     margin:0;
     _padding:0 1px;
     _height:100%;
     _overflow:hidden;
}
#scrollable {
     _height:100%;
     _width:100%;
     _overflow:auto;
}
#fixed {
     right:25px;
     position:fixed;
     _position:absolute;
}

Markup:

<div id="fixed">This box is fixed.</div>
<div id="scrollable">
     <div id="doc">This box will scroll.</div>
</div>

Be aware that this approach may lower the semantic of your document.