Html – CSS Position Different in FF and IE


I am trying to position some elements on a page at absolute positions. I used the following test code (I replaced the <> with [] to get through the HTML cleaner):

  <div style="position=absolute; top=100px; left=100px"> HELLO 100,100</div>
  <div style="position=absolute; top=200px; left=100px"> HELLO 200,100</div>
  <div style="position=absolute; top=0px; left=0px"> HELLO 0,0</div>

This does what it is apparently supposed to do in IE, but simply flows the divs one below each other in FF (3.0). I know CSS support is pretty variable. What am I missing, and is there a more standard way to do this?

Best Solution

The problem is your CSS syntax.

Instead of:



position: absolute;

If you want absolute positioning within another tag, set the outer tag to be relatively positioned:

<div style="position:relative;">
  <div style="position:absolute;bottom:0;right:0;">
    This will be positioned in the bottom-right of the outer div.