Absolute DIV placement withing a TD container using CSS

[wls]

I've got a problem that requires rendering DIVs at different offset
locations, and while I've got a solution that works, the absolute
positioning is working to the client window, not to the parent
container.

The stuff I write will get placed inside a table cell produce by
someone else's template -- I have no control other than to emit
HTML/CSS within that sole cell.

So, I decided to construct a simple case and am having problems getting
that to render.

The goal, make a three by three table, and in the center cell do test
positions at the upper right, lower left, and center. Here's code that
I hoped did that.


<TABLE WIDTH="100%" HEIGHT="100%" BORDER=1>
<TR><TD>&nbsp ;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD STYLE="border: thick solid green;">
<div style="width:10 0px; height:100px; position: absolute; top: 0%;
left: 100%; background-color: yellow;">
Upper right
</div>
<DIV STYLE="width:10 0px; height:100px; position: absolute; top: 100%
left: 0%; background-color: yellow;">
Bottom Left
</DIV>
<DIV STYLE="width:10 0px; height:100px; position: absolute; top: 50%
left: 50%; background-color: yellow;">
Center
</DIV>
</TD>
<TD>&nbsp;</TD>
</TR>
<TR><TD>&nbsp ;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
</TABLE>


It doesn't.
[color=blue]
>From what I can tell, absolute positions are from the client window,[/color]
and relative positions are from the last thing dropped on the page.
What I need is relative to the parent container.

The actual problem require computated things like 37% over and 82% down
where the DIVs contain arbitrarily sized content and deliberately
overlap, so I can't fudge a solution to this lone test case.

Any CSS wizard know how to accomplish something like this?

[Jim Moe]

Re: Absolute DIV placement withing a TD container using CSS

wls wrote:[color=blue]
>
> Any CSS wizard know how to accomplish something like this?
>[/color]
Add "position:relat ive" to the parent container.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[wls]

Re: Absolute DIV placement withing a TD container using CSS

Jim Moe writes:[color=blue]
> Add "position:relat ive" to the parent container.[/color]

Quick synopsis: This provided me with a workable solution; thank you.

I'm not sure, however, I understand _why_ this works. I thought
attributes, such as this, affected the relationship relative to its
peers within its parent container. Instead, this magically seems to
affect the containers children.

Additionally, I discovered the parent container must have explicit
height; a DIV or a TABLE works, but a TD for a parent container does
not. Not certain if this is a browser bug or a CSS oversight.

[Jim Moe]

Re: Absolute DIV placement withing a TD container using CSS

wls wrote:[color=blue]
>
> Quick synopsis: This provided me with a workable solution; thank you.
>
> I'm not sure, however, I understand _why_ this works. I thought
> attributes, such as this, affected the relationship relative to its
> peers within its parent container. Instead, this magically seems to
> affect the containers children.
>[/color]
I do not know where in the spec this is defined. From "Cascading Style
Sheets: The Definitive Guide":

The containing block for an absolutely positioned element
is the nearest ancestor element that has a "position"
value other than "static."

So using position:relati ve provides a nearest ancestor without changing
the layout.
[color=blue]
> Additionally, I discovered the parent container must have explicit
> height; a DIV or a TABLE works, but a TD for a parent container does
> not. Not certain if this is a browser bug or a CSS oversight.
>[/color]
What does "not work" mean?

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[wls]

Re: Absolute DIV placement withing a TD container using CSS

I added the "position: relative;" style to the TD tag that contained
all my absolute positioned DIVs. The DIVs still rendered relative to
the browser window, not the table cell.

Then I moved the "position: relative;" style to the TABLE tag, which
had a cell that contained my absolute positioned DIVs. The DIVs
rendered relative to the entire TABLE (as you'd expect) hovering all
over the existing cells. ...I may have use for this!

Then I made a stand alone DIV and gave it the "position: relative;"
style. The child absolute positioned DIVs spilled outside of the
parent DIV, and the parent DIV appeared to have no height. When I gave
the DIV an explicit height attribute, things worked perfectly.

A little experimentation showed that the parent container must have
some height for the positioning to work.

Ideally, I'd love a solution where I could apply the CSS style to the
desired TD tag and have all children rendered within in.

However. Creating a DIV tag in the TD tag with a width and height of
100% yields the visual result desired anyhow. I'm just surprised the
style didn't work on the TD element, and that I _needed_ the additional
DIV to pull it off.

Anyhow: thank you, thank you, thank you. Your solution -and-
explaination were great!