I’ve been working on this layout that had a relatively positioned element inside a container with overflow.
In Internet Explore 6 /7 it seems overflowing the b element.

Here’s some code to demonstrate the problem:

<div id="container">
    <div id="a"></div>
    <div id="b"></div>
</div>

And the related CSS:

#container {
   height:100px;
   border:1px solid blue;
   overflow:auto;
   }
#a {
   height:200px;
   background-color:lightblue;
   float:left;
   width:60px;
   }
#b {
   position:relative;
   height:200px;
   background-color:pink;
   width:60x;
   }

The key thing to notice in this CSS is the overflow set to the container, and the positioning set to element b. Here’s a screenshot to demonstrate:

Position in IESo here is the solution to overcome from the overflow of b . we have to position:relative; in the container class.

.container

{

   height:100px;
   border:1px solid blue;
   overflow:auto;
   position:relative;

}

Note: For Mozilla Firefox we donot need to position in both element.

Advertisements