PDA

Click to See Complete Forum and Search --> : parent div expand around absolute child div

RobDavid
12-17-2006, 11:15 AM
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
12-17-2006, 04:05 PM
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
12-17-2006, 05:07 PM
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
12-17-2006, 05:50 PM
Nope, the clearing div didn't do it.

Looks like i'm going to have to use unit height for the parent?
Centauri
12-17-2006, 06:15 PM
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
12-10-2009, 03:54 PM
Here's a good guide that might be helpful too.

http://www.lifeworldblog.com/css-and-website-design/extending-parent-div-around-floated-child-divs
CFHutton
12-10-2009, 04:07 PM
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
12-10-2009, 04:23 PM
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%;border:solid 1px #ff0000;'>text<BR><BR>text
</div> <!-- problem, but must be absolute-->

</div>


</div>


cfh