www.webdeveloper.com
Results 1 to 8 of 8

Thread: parent div expand around absolute child div

  1. #1
    Join Date
    Nov 2005
    Posts
    170

    parent div expand around absolute child div

    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.

    Code:
    <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>

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,530
    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?)
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    A clearing div under the absolutely positioned child should do the trick
    Code:
    <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

  4. #4
    Join Date
    Nov 2005
    Posts
    170
    Nope, the clearing div didn't do it.

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

  5. #5
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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

  6. #6
    Join Date
    Dec 2009
    Posts
    1

    Here's a good guide.

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

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

  7. #7
    Join Date
    Mar 2006
    Posts
    172
    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

  8. #8
    Join Date
    Mar 2006
    Posts
    172
    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?

    HTML Code:
    <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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles