CSS: absolute positioning in different browsers

Question

Why do different browsers have different positions?

{ 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 looks like 100px to the right relative to FF ... Why?

Edit: 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 1

Got it to work ... Parent div must have position:relative in it CSS declaration. If anyone encounters this problem, check your parent div :)

Answer 2

Your parent div should have position:relative; . Otherwise, your position:absolute; will be posted from the entire page. If the parent div has relative positioning of the absolute positions of the div based on its parent.