Positioning context - does it work?

I posted a similar question yesterday, but didn't get an answer that
resolved the issue. (Thanks to those who tried though.)

The background: I've read in books and online that if you have one
element with "relative" positioning, such as a <div>, it creates a
"positioning context" for element within it. E.g., if you have a <p>
inside your <div> you can give it absolute positioning and position it
(right, left, top, bottom) in terms of the <div> -- not in terms of the
browser window. So in this scenario...

<div style="position:relative;">

<p style="position:absolute;
top:20px;
left:20px;">

Some text

</p>

</div>

.... the <p> will not be positioned 20 by 20 pixels from the window upper
left (assume the <div> is somewhere lower down in the page). It will be
located those dimensions in relation to the upper left corner of the
<div>. And that's supposed to work in all up-to-date browsers from what
I've read.

However, I can't get it to work.

Here is some code from a page I'm trying to design:

[...]

<div style="position: relative;
background-color:#003399;
padding:3px;
margin: 12px 0 0 0;">
<h1 style="margin: 0;
padding: 0;
color:#ffffff;
font:Arial, Helvetica, sans-serif;
font-size: 12px;">
ASA Notes
</h1>
<p style="color:#ffffff;
font:Arial, Helvetica, sans-serif;
font-size: 12px;
position:absolute;
right:4px;">
<a href="/meetingnotes/index.htm">Home</a>

</p>
</div>

[...]

And the resulting output in IE and Mozilla is here:

http://www.somerandomcrap.com/temp/cssscreenshots.htm

Note that the word "Home" is OUTSIDE of the <div> and not located where
intended: inside the <div> near the right edge, lined up at the same
vertical level as the <h1> element with "ASA Notes" in it.

So do the supposed CSS positioning "rules" have any validity? Or is the
problem that I'm not understanding them correctly? Or have I made some
syntax error?

By the way, I also tried achieving the desired effect using the "float"
property, but that didn't work either.

I checked that the document is valid XHTML 1.0 strict.

Any help would be greatly appreciated.

Toby Inkster wrote:

rajek wrote:


And the resulting output in IE and Mozilla is here:
http://www.somerandomcrap.com/temp/cssscreenshots.htm


In this case it just looks like you've triggered an IE bug (there are
many). You could probably acheive the desired effect using
text-align:right instead.

Thanks for the reply. However, note that the problem occurs in Mozilla
as well -- not just IE. Also, the desired effect (refer to my original
post for a description of that) would not be achieved using "text-align:
right".

Toby Inkster wrote:

rajek wrote:

Also, the desired effect would not be achieved using "text-align: right".


What about floating?
http://examples.tobyinkster.co.uk/floatyfloaty.strict

Finally it works. Thanks a lot for the help.