How to make position fixed in IE6 using CSS only

There is big debate in the web community, to support IE6 or not, even Google has stop their support on their apps for IE6, but I always love to have fun with this buggy browser and try to make it function, but not pixel perfection. Though, there are number of issues in IE6 one of that is IE6 does not recognize the position:fixed.

Let’s make IE6 recognize position:fixed

It’s true IE6 does not recognize position:fixed. We need to do some tweaking, What, If IE6 does not recognize position:fixed but it do recognize position:absolute. Before continuing with tweaking, let’s clear the difference between fixed and absolute positioning.

Difference between fixed and absolute positioning.

Absolute: You can place an element anywhere in the page using it’s attributes top, left, right or bottom and this position will be relative to the its parent block with positioning set to relative. If there is no such parent then HTML will be its default parent and block will be placed relative to the page.

Fixed: A fixed position element is positioned relative to the viewport, or the browser window. Fixed positioned element will stay right where it is when the page is scrolled.

Let’s make absolute position to work as fixed in IE6

Let’s start with an example where you have to fixed the footer of a page. If we forget to support the IE6, there will be following blocks where footer will be positioned fixed.

Now, it’s working fine in all the browser but not in IE6 because fixed position is not recognize by IE6, to make it recognize we just have to add two CSS property for HTML, body and wrapper.

And now change position of footer from fixed to absolute

We have given height:100% and overflow: auto; to HTML, body and wrapper. Therefore, two scroll bars will appear one for HTML,body and one in wrapper. Solution to this problem is to give width:100% to wrapper and take one another div as inner-wrapper with required width. Now, absolute position is working in IE6 as fixed positioned.

How it’s working

  • Wrapper has the height:100%; and that 100% is view-port area
  • Wrapper has the overflow:auto; as the content go beyond the height of view-port scroll will appear
  • Footer has been assigned position absolute which is relative to the view-port and the view-port is fixed.

Check the demo code

Now you can make any block to be fixed in IE6

Now any absolute positioned block will work as fixed positioned relative to the view-port. To make it relative to the inner-wrapper of specific width, it needs to be positioned as below.

Check the demo code

If you find this post useful, Share it:

Author: Gopal Juneja

A UX/UI enthusiast living in India Delhi having 18+ years of industry experience to use in beautiful design and handsome front end coding.

1 thought on “How to make position fixed in IE6 using CSS only”

Leave a Reply

Your email address will not be published. Required fields are marked *