Question

I have two divs, one inner and one outer, but the inner div is being rendered below the outer div. Here’s my simplified markup:

<div id="outer" style="position: relative;">
    Outer

    <div id="inner" style="position: absolute; right: 0;">
        Inner
    </div>

</div>

I can confirm in Firebug that the inner div is rendered below (and outside of the outer div). Obviously I’m assuming that there is some other style on the page that could cause this, but I haven’t been able to find it. What could cause this kind of behavior? Interestingly, when I remove the position: absolute; style from the inner div, this behavior disappears… but of course I don’t get the positioning I want in that case.

What I want here is the inner div to appear below the text “Outer,” but still inside the outer div. I’d like to to be aligned to the right side of #outer.

There’s also another div inside #outer, where the text “Outer”, aligned to the left (position: absolute; left: 0;). I didn’t mention that in the original question because it didn’t seem directly relevant to the behavior I’m observing. Both inner divs with absolute positioning show up below and outside of #outer.

Edit: What I really, really want here is an outer container with two inner columns: one on the left and one on the right. Floats seem to cause other problems, so I was hoping that relative+absolute positioning would solve this.

Answer 1

Your problem is not with the absolute position. Indeed inner div will have top,left of outer div as root coordinates, the problem is laying down in how divs (block elements) are rendered when no width/height attributes are set, check this below it will answer your question. 🙂

<div id="outer" style="position: relative; background-color: #f1af1f; width: 100px;">
    Outer
    <div id="inner" style="position: absolute; top: 0; right: 0;">
        Inner
    </div>
</div>

Edit:
I updated the code above, you can run it in your browser and you’ll see the follow (I will try to explain how the browser understands it).
A yellow rectangle with text “Outer” on left and “Inner” on right on the same line. The rectangle is 100px width. Now how the browser understands the code above.

First the browser parses the html into DOM Tree, so you can this structure (simplified)
body ->
  div#outer -> // position relative, yellow background, 100px in width, auto-height
    div#inner -> // position absolute, top offset 0 units, right offset 0 units.

Now the browser renders div#outer at top left corner of the browser’s window, with the width of 100px, auto calculates the height based on the font used to display the string “Outer”. Then it moves to its children (div#inner). It sees its positioned absolute with top and right. Now the browser knows div#outer is positioned relatively so it sets (top,left) coordinates of div#inner to start from (top,left) coordinates of div#outer. Once this is measured, the browser knows how to set top and right. In our case the bounds of div#outer are (top, left, right, bottom): 0, 0, 100, X (depending on div#outer content height). So div#inner position start from div#outer top border to the bottom and from its right border to the left one (depending on the content).

Now, one this to mention here. If you have more content in your div#inner then the height/width of your div#outer the inner one will overlap and go out the boundaries of div#outer. You can fix this by adding: overflow: hidden; to div#outer.

Hope this makes the thing more clear.

Note: I skipped details on how position absolute is handled by the browser.