Stylesheets - absolute positioning of nested divs

Author

absolute positioning of nested divs

Martin Eyles

2005-10-25, 6:27 am

Hi,
I am trying to get two divs to align at the bottom of another div. As
they are nested in this div, I expected them to be positioned at the bottom
of it, using the code below, but they are instead at the bottom of the body.
note - I do want them on top of each other, so the only problem is - where
is the bottom, and how can I make it the same as the bottom of the div.

Thanks, Martin (code below)

<html>
<head>
<title>
test
</title>
</head>
<body>
<div style="height: 100px; border: 1px solid black">
<div style="position: absolute; bottom: 0px">skjfh</div>
<div style="position: absolute; bottom: 0px">flj</div>
</div>
</body>
</html>

--
Martin Eyles
martin.eyles@NOSPAM.bytronic.com

Spartanicus

2005-10-25, 6:27 am

"Martin Eyles" <martin.eyles@NOSPAM.bytronic.com> wrote:

> I am trying to get two divs to align at the bottom of another div. As
>they are nested in this div, I expected them to be positioned at the bottom
>of it, using the code below, but they are instead at the bottom of the body.
>note - I do want them on top of each other, so the only problem is - where
>is the bottom, and how can I make it the same as the bottom of the div.

http://www.w3.org/TR/CSS21/visudet....g-block-details

>(code below)

Don't post code to the group, upload a minimized test case using some
real content and post the url.

--
Spartanicus

Martin Eyles

2005-10-25, 6:42 pm

"Spartanicus" <invalid@invalid.invalid> wrote
> "Martin Eyles" <martin.eyles@NOSPAM.bytronic.com> wrote:
>
bottom[color=darkred]
body.[color=darkred]
where[color=darkred]
>
> http://www.w3.org/TR/CSS21/visudet....g-block-details

According to this link, the text should be at the bottom of the box with a
border, which is what I want, yet it is at the bottom of the page. This
problem occurs in both firefox and internet explorer. Ultimately, it really
only needs to work in ie, as it is for a closed web application, which
already uses activex (so is already ie only). Even so, I would prefer if
possible a fix that is standards compliant, as this will help in the future,
but if not possible, I'll take the hack.

>
> Don't post code to the group, upload a minimized test case using some
> real content and post the url.

http://www.bytronic.com/tests/test1.html

I don't really have real content as such. It is for a web app rather than a
website as such, so I don't have masses of text. Anyway, real content would
kind of go against having a minimised test case.

Thanks for all your help,
Martin

--
Martin Eyles
martin.eyles@NOSPAM.bytronic.com

Spartanicus

2005-10-25, 6:42 pm

"Martin Eyles" <martin.eyles@NOSPAM.bytronic.com> wrote:

>bottom
>body.
>where
>
>According to this link, the text should be at the bottom of the box with a
>border

No, I'll quote the most relevant bits: "If the element has 'position:
absolute', the containing block is established by the nearest ancestor
with a 'position' of 'absolute', 'relative' or 'fixed',"

[...]

"If there is no such ancestor, the containing block is the initial
containing block."

>
>http://www.bytronic.com/tests/test1.html
>
>I don't really have real content as such. It is for a web app rather than a
>website as such, so I don't have masses of text. Anyway, real content would
>kind of go against having a minimised test case.

Using real content allows us to see what you are actually trying to do,
often the perceived solution is wrong.

--
Spartanicus