Fixed CSS Positioning in IE6, IE7, etc.

See The Float In Action Here

You know, nothing is more frustrating when you hear that something has been fixed in a particular software update, and then you find out that it really hasn’t. I ran into this today when I was trying to do some fixed positioning of a new web host that needed to be affixed to the bottom of the browser and to the right at all times. I heard that fixed positioning in IE7 was now possible, so like an idiot I went ahead and placed just position: fixed; into my CSS and uploaded it for testing.

Of course in Firefox it looked and reacted fantastic. Then I opened IE7 and whoa……it was all the way shifted down at the bottom of my page like it never even looked at the CSS to position it. I’m not here to debate whether your version of IE7 works with this or not, but I can help you keep the IE6 and possibly some IE7 users who have messed up versions happy with your site design.

The Fix
Ok, short, simple sweet. That’s the way all web developers like it right? Well you’re gonna love this one then. First thing…add the following into your .css file or in your head tags of your page…it’ll work either way:


* {
margin: 0;
}
html, body {
height: 100%;
overflow: auto;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}


With me so far? Ok, next go ahead and create 2 more entries in your CSS substituting whatever name you are going to call the div that will contain your desired “floating” layer. In this case I’m calling it floatHer.


#floatHer {
position:fixed;
bottom:0;
right:0;
width:720px;
height:480px;
z-index:7;
}
* html #floatHer {
position: absolute;
}

Finally….and this is the cool part…just put

around the code of the page that IS NOT SUPPOSED TO FLOAT. Keep the div that you are wanting to float outside of this tag since this is part of the magic that happens when all of this comes together on your page.

Now upload/test your page in any browser you’d like and you’ll find your floating layer reacting just fine in IE6, Your screwed up version of IE7 like mine, Firefox, Safari, etc. Now obviously there’s some issues when it comes to scroll bars, etc., but for the basic ad you want to float on top of the web page (that’s why you googled this right?) this will work just fine.

Until next time…happy coding!

Doug.