Workaround to IE's Overflow Auto and Position Relative Bug

The other day I ran into a rather annoying CSS bug in Internet Explorer 6 when using a XHTML strict or transitional doctypes. If you place a relatively positioned element inside of a container using overflow auto, the relatively positioned element becomes fixed on the page, rather than becoming visually contained in the overflow auto element.

IE Bug Example (HTML):

<div style="height:80px;overflow:auto;background-color:gray;width:200px;">
	<p style="position:relative;background-color:lightblue;width:150px;">
		I'm a relatively positioned element!
	</p>
	I am not.
</div>

IE Bug Example (In Action):

I’m a relatively positioned element!

I am not.

As stated by the W3C, this is not correct behavior.

9.4.3 Relative positioning

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1’s offset is applied. This implies that relative positioning may cause boxes to overlap. However, if relative positioning causes an ‘overflow:auto’ box to have overflow, the UA must allow the user to access this content, which, through the creation of scrollbars, may affect layout.

I believe I have discovered a workaround for this bug. IE will behave correctly if you add ‘position:relative’ to the containing element that is using ‘overflow:auto’. I believe this is an expectable workaround because setting ‘position:relative’ without setting the ‘top’ or ‘left’ attributes will not affect the page layout.

Solution Example (HTML):

<div style="position:relative;height:80px;overflow:auto;background-color:gray;width:200px;">
	<p style="position:relative;background-color:lightblue;width:150px;">
		I'm a relatively positioned element!
	</p>
	I am not.
</div>

Solution Example (In Action):

I’m a relativly positioned element!

I am not.

Let me hear from you if this helped you out.

Using CSS to absolute position an object relative to the inside of a center aligned container.

I wrote this article about 2 years ago. Our creative department at work ran into this problem last week, so I’ve decided to republish the article in blog format. The title is a mouth full, but I think it sets up the tutorial appropriately. 🙂 Enjoy.

Introduction

Horizontally centered websites have long been extremely popular. However, positioning an element using “position:absolute” in a center aligned website can be tricky. This tutorial walks you through the process using only CSS, and without the use of tables or complicated image splicing.

Why would you want to use absolute positioned elements in a center aligned layout? Such a technique allows you to place an image or navigational button on top of your current design. I use this technique on gnourg.com.

Unfortunately, an element that is absolute positioned in a center aligned container does not maintain its position relative to its container. Instead the absolute positioned element maintains its position relative to the window. This has the potential to blow the sites intended layout.

-Click here to view an example of the problem.
Hint: resize the window’s width.

Fortunately there is a solution to this problem.

Setting up our scenario

We use an image as our element to absolute position. But before we can position our image, we must create our center aligned container.

To center our website we create a div wrapper that contains all of the elements in the website, including our absolute positioned image. The CSS for our div wrapper appears as follows:

#wrapper {
   margin: 1px auto;
   padding: 0;
   border: 2px solid black;
   width: 580px;
   height: 300px;
}

Placed in our HTML, including all of the proper definitions, it looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Absolute positioning tutorial.</title>
<meta http-equiv="Content-Type" content="text/html;
   charset=ISO-8859-1" />
<style>
#wrapper {
   margin: 1px auto;
   padding: 0;
   border: 2px solid black;
   width: 580px;
   height: 300px;
}
</style>
</head>
<body>
<div id="wrapper">

</div>
</body>
</html>

Putting in the image

Our goal is to absolute position our image 200 pixels from the left border of our div wrapper and 30 pixels from the top border of our div wrapper. It will hover over any content beneath it.

We start off by simply placing the image in our div wrapper as follows:

<body>
<div id="wrapper">
<img src="sample.gif" height="50" width="100" alt="our img" />
This text is sample content that we want to start in the upper
left hand corner of our site, behind any absolute positioned
elements.
</div>
</body>

It is important that we place our image tag first inside the div wrapper, before any of the page’s other content.

Now we absolute position our image so that it does not take up space on our page. This should place our image in the upper left hand corner of our div wrapper, on top of our content. The CSS for this looks as follows:

<body>
<div id="wrapper">
<img src="sample.gif" style="position:absolute" height="50"
   width="100" alt="our img" />
This text is sample content that we want to start in the upper
left hand corner of our site, behind any absolute positioned
elements.
</div>
</body>

Final position

Now that our image takes up no space, and because it is placed before any of our page’s other content, it sits nicely in the top
left hand corner. From here we move our image by putting it in a div box and using relative positioning. It looks
like the following:

<body>
<div id="wrapper">
<div style="position:relative;top:30px;left:200px">
<img src="sample.gif" style="position:absolute" height="50"
   width="100" alt="our img" />
</div>
This text is sample content that we want to start in the upper
left hand corner of our site, behind any absolute positioned
elements.
</div>
</body>

Eureka, we have our absolute positioned object positioned relative to the inside of our center aligned website.

-Click here to view the final product.
Don’t forget to try resizing the window’s width.

This method has been tested in IE 5, IE 6, Netscape 6, and Mozilla 1.6. If you have any questions, corrections, or additions please drop me a comment.