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:
So 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