I have a problem with relative positioning in Google Chrome The following code works fine in IE but not in Chrome. Relative positioning is relative to the normal position of an element. The normal postion of the red box is right under the black box. If I add a 10% space the red box should appear 10% under the normal position.
Html
<body>
<div id="outer">
<div id="inner1">
</div>
<div id="inner2">
</div>
</div>
</body
Css
#outer
{
position:absolute;
left:20%;
right:20%;
bottom:20%;
top:20%;
background-color:Blue;
}
#inner1
{
position:relative;
width:20%;
height:20%;
background-color:Black;
}
#inner2
{
position:relative;
top:10%;
width:20%;
height:20%;
background-color:Red;
}