Positioning context - does it work?

[rajek]

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]

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.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Now Playing ~ ./white_town_-_your_woman.ogg

[rajek]

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".

[kchayka]

follow-up set to c.i.w.a.stylesheets

rajek wrote:

<div style="position: relative; [...]
<h1 [...] >
<p style="
position:absolute;
right:4px;">
<a href="/meetingnotes/index.htm">Home</a>
</p>
</div>

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

Note that the word "Home" is OUTSIDE of the <div>

You have not set a top position for that paragraph. It's probably
defaulting to the same position as static, which is below the <h1>
element. The paragraph is just overflowing the <div> container.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Gus Richter]

rajek wrote:

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".

<style type="text/css">
#wrapper {
background-color:#039;
padding:2px 8px 0 4px;
height:26px;
margin-top: 30px;}
#left {
float:left;
font:bold 100% Arial, Helvetica, sans-serif;
margin-top:2px;
color:#fff;}
#right {
float: right;
color:#fff;
font:bold 100% Arial, Helvetica, sans-serif;}
</style>

<div id="wrapper">
<div id="left">ASA Notes</div>
<div id="right"><a href="/meetingnotes/index.htm">Home</a></div>
</div>

--
Gus

[Toby Inkster]

rajek wrote:

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

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

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

[DM]

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.