CSS - postion: absolute; - auto height

Question

I am having a problem with some div's

The outer div has a min-height, but the inner divs are all varying heights. Because the inner divs are absolute positioned, they do not affect the outer divs height. Is there a way to make these inner divs affect the height of the outer div?

The reason I am styling these divs with position:absolute is so that they all start at the top of the container div.

Answer 1

I think you should position them relatively and just change "vertical-align" to "top" in the interior divs. Then you won't have the issue of messing with abs divs.

Answer 2

As far as I know, there's no way for absolutely positioned child elements to affect the height of their statically, or relatively positioned parent elements using only CSS. Either:

• Reorganize so that the child elements remain in the document flow
• Use JavaScript on load of the page to set the height of the parent to the height of the largest child

This issue is common in fade-in/fade-out JavaScript slideshows, and from what I've seen either 1) the height of the parent container needs to be defined or 2) the parent container's height is set dynamically for each slide.

Answer 3

You can simply float the divs if you want them to be on the same horizontal plane.