Fake position:fixed for IE6

Fixed Positioning in IE6 without Script

This box should remain fixed as the screen scrolls.

This method is compatible with more standards compliant browsers such as Firefox.

  1. First, put IE6 into "standards mode" by using a strict DOCTYPE. Note that IE6's standards mode is known for its extremely odd quirks. We are taking advantage of one now.
  2. Use IE conditional comments to style the HTML and BODY tags like so:
     html, body {
    	height: 100%;	overflow: auto; 
    	}
  3. Style anything you want to stay fixed as position:absolute.


Special thanks to Alex Robinson for making my code act more civilized than it wants to be — and thanks to the participants in CSS-Discuss who gave it a well-deserved drop-test.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto.

Haec disserens qua de re agatur et in quo causa consistat non videt. Non enim si alii ad alia propensiores sunt propter causas naturales et antecedentes, idciro etiam nostrarum voluntatum atque appetitionum sunt causae naturales at antecedentes; nam nihil esset in nostra potestate si res ita se haberet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto.

Haec disserens qua de re agatur et in quo causa consistat non videt. Non enim si alii ad alia propensiores sunt propter causas naturales et antecedentes, idciro etiam nostrarum voluntatum atque appetitionum sunt causae naturales at antecedentes; nam nihil esset in nostra potestate si res ita se haberet.

This has been a demonstration of faking fixed positioning with CSS for Internet Explorer without scripts. Back to CSS buttons