css - jQueryUI slider: absolutely positioned element & parent container height

Question

I have an example on http://jsfiddle.net/SsYwH/

In case it don't work

HTML:

<div class="container">
   <div class="absolute">
       Testing absolute<br />
       Even more testing absolute<br />
   </div>
   A little test<br />
</div>

CSS:

.container {
    background: green;
}
.absolute {
    position: absolute;
    background: red;
}

Problem

I use jQuery to create a slider-effect. To do that I need to set position absolute.

• The red block in my code is the position absolute slider.
• The green block is the container.

I still want the container to be set by it's childs height. Now it don't know it because of the position absolute. Solution?

Answer 1

Absolutely positioned elements do not count towards the container's contents in terms of flow and sizing. Once you position something absolutely, it will be as if it didn't exist as far as the container's concerned, so there's no way for the container to "get information" from the child through CSS.

If you must allow for your scroller to have a height determined by its child elements without Javascript, your only choice may be to use relative positioning.