Re: absolute positioning of nested divs

"Martin Eyles" <martin.eyles (AT) NOSPAM (DOT) 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.h...-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

"Spartanicus" <invalid (AT) invalid (DOT) invalid> wrote

"Martin Eyles" <martin.eyles (AT) NOSPAM (DOT) 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.h...-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.

(code below)

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 (AT) NOSPAM (DOT) bytronic.com

"Martin Eyles" <martin.eyles (AT) NOSPAM (DOT) 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.h...-block-details

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

(code below)

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.

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

--
Spartanicus

Ah, sorry, missed that as it was quite subtle. So essentially, to get this
effect, whilst maintaing normal flow for the outer div, I need add
"position: relative" to the outer div style.

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

it works now!

Thanks,
Martin

--
Martin Eyles
martin.eyles (AT) NOSPAM (DOT) bytronic.com

"Spartanicus" <invalid (AT) invalid (DOT) invalid> wrote

"Martin Eyles" <martin.eyles (AT) NOSPAM (DOT) 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.h...-block-details

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

(code below)

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.

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

--
Spartanicus