parent div expand around absolute child div

[RobDavid]

I have an absolute position child div that i'm trying to fit in a div of a template. How can I get the parent div to expand to the content of the absolute pos div???

Right now, the parent div appears empty while the child div overlays it.

<div style='border:solid 2px #0000FF;'><!-- parent that's not growing-->


<div style='position:relative;border: solid 1px #00FF00;'> <!-- child that's not growing -->

<div style='width:100%;position:absolute;top:0px;left:0px;border:solid 1px
#ff0000;'>text<BR><BR>text</div> <!-- problem, but must be absolute-->

</div>


</div>

[NogDog]

I don't think you can: when you absolutely position an element, by definition you take it out of the document flow, so as far as positioning goes that element is no longer a "child" (though it still is semantically). Is there a reason you cannot absolutely position the parent element, instead? (Or for that matter, is absolute positioning really required?)

[Centauri]

A clearing div under the absolutely positioned child should do the trick

<div style='border:solid 2px #0000FF;'><!-- parent that's not growing-->
<div style='position:relative;border: solid 1px #00FF00;'> <!-- child that's not growing -->
<div style='width:100%;position:absolute;top:0px;left:0px;border:solid 1px
#ff0000;'>text<BR><BR>text</div> <!-- problem, but must be absolute-->
<div style='clear:both;'>
</div>
</div>

Cheers
Graeme

[RobDavid]

Nope, the clearing div didn't do it.

Looks like i'm going to have to use unit height for the parent?

[Centauri]

Sorry for wrong info there - I was thinking the child was floated. A clearing div will only work for a float - with absolute positioning you will have to set the parent height.

Cheers
Graeme

[mchmaster]

Here's a good guide that might be helpful too.

http://www.lifeworldblog.com/css-and...ted-child-divs

[CFHutton]

It doesn't appear you need to absolutely position that div since you are giving it top:0 and left:0 and the div it's directly inside is position:relative. What happens if you just drop the position:absolute? I'm probably missing something obvious, but it appears about the only thing position:absolute is doing for you here is causing the problem you are trying to solve...

cfh

[CFHutton]

You said it needed to be position:absolute, but you didn't explain why. Something like that is sort of hard to just accept in this case

Is this what you are trying to do?

<div style='border:solid 2px #0000FF;'><!-- parent that's not growing-->


<div style='border: solid 1px #00FF00;'> <!-- child that's not growing -->

<div style='width:100&#37;;border:solid 1px #ff0000;'>text<BR><BR>text
</div> <!-- problem, but must be absolute-->

</div>


</div>

cfh