CSS Problem with Nested DIVs

[Vincent.Piattelli]

I working on a page that has two nested DIV elements. The child DIV is
absolutely positioned within the parent DIV. The contents of the child
DIV are dynamic, but no matter how large it get, I want the child to be
rendered totally within the parent DIV. As things stand, as the child
DIV grows, it overflows and sticks out. How can I style the parent so
that it always is larger than the child?

[Stephen Poley]

CSS question, but never mind ...

On 14 Oct 2005 16:19:37 -0700, Vi***************@gmail.com wrote:

I working on a page that has two nested DIV elements. The child DIV is
absolutely positioned within the parent DIV. The contents of the child
DIV are dynamic, but no matter how large it get, I want the child to be
rendered totally within the parent DIV. As things stand, as the child
DIV grows, it overflows and sticks out. How can I style the parent so
that it always is larger than the child?

There is not really any such thing as "absolutely positioned within the
parent DIV". Once you absolutely position something, you take it out of
the flow, and it is no longer within anything (except the document).

I suspect that what you are asking for is not possible without
scripting. You might consider using floats rather than absolute
positioning, along the lines of
http://www.xs4all.nl/~sbpoley/webmatters/layout3.html

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Vincent.Piattelli]

thanks a lot for the advice. i'll check it out on monday.

[Robert]

On Saturday 15 October 2005 06:10, Stephen Poley wrote:

CSS question, but never mind ...

On 14 Oct 2005 16:19:37 -0700, Vi***************@gmail.com wrote: [...]

There is not really any such thing as "absolutely positioned within
the parent DIV". Once you absolutely position something, you take it
out of the flow, and it is no longer within anything (except the
document).

Is 'parent DIV' not the same as containing block?

<quote specs>
absolute
The box's position (and possibly size) is specified with the 'left',
'right', 'top', and 'bottom' properties. These properties specify
offsets with respect to the box's containing block. Absolutely
positioned boxes are taken out of the normal flow. This means they have
no impact on the layout of later siblings. Also, though absolutely
positioned boxes have margins, they do not collapse with any other
margins.
</quote specs>

Does this not mean you could absolutely position a child within it's
parent div?

--
Robert

[kchayka]

Robert wrote:

Is 'parent DIV' not the same as containing block?
No. The containing block is the first ancestor that is positioned
(absolute, relative or fixed). That may be the parent, grandparent, or
some other element up the tree. If no ancestors are specifically
positioned, body becomes the containing block.
Does this not mean you could absolutely position a child within it's
parent div?

If the parent is positioned, you can absolutely position a child within
it by setting top, left, etc. on the child. Those properties are now
relative to the parent, not body.

Just be careful what you wish for and use absolute positioning wisely.
I've seen way too many sites that attempt pixel-perfect layouts using
absolute positioning, but only end up terribly broken with my
larger-than-average text size. :(

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