CSS: absolute positioning in different browsers

css position absolute
luqita picture luqita · May 4, 2011 · Viewed 20.1k times · Source

Why is this getting different positions on different browsers?

{
    position: absolute;
    left:332px;
    top: 210px;
    width: 293px;
    height: 215px;
    border: 1px solid #000000;
    background-color: #143f72;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
}

In IE it goes to the left like 100px compared to Firefox, and in Chrome it goes like 100px to the right relative to FF... Why?

Edit: The html is just <div id="container"><div id="the_css_above_div"></div></div>

#container has the following css: 

#container{
    float:left;
    width: 632px;
}

Thanks!

Answer

luqita picture luqita · May 4, 2011

Got it to work... The parent div needs to have position:relative in it's CSS declaration. If anyone comes across this problem check your parent div :)

Related questions

Position: absolute and parent height?

I have some containers and their children are only absolute / relatively positioned. How to set containers height so their children will be inside of them? Here's the code: HTML <section id="foo"> <header>Foo</header&…

Read More
How can I position one element below another?

I want to put one element under another element. I am using position: absolute in CSS. I want the blue box to be positioned under the red box. How could I achieve this?

Read More
Is there any way for "position:absolute" div to retain relative width?

Let's say I have two divs, one inside the other, like so: <html> <body> <div id="outer" style="width:50%"> <div id="inner" style="width:100%"> </div> </div> </body&…

Read More