Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts

    problems with absolute position DIV inside relative position DIV

    Putting the question up front
    QUESTION:
    When enclosing a bunch of absolute positioned DIVs inside a relative positioned DIV, Is there a way to make the outer DIV height be the sum of its content heights? I want to be able to reliably place content before and after a specific DIV (which happens to be coded as absolute)

    BACKGROUND:
    I recently wrote some javascript for a TabbedPane which uses position:absolute style. Worked fine. When trying to convert to in line positioning (so users can place their content where the browser would normally render it) I decide to simply enclose it in a relative position DIV. So I've got
    <!-- I actually used a style sheet for all this but you get the idea -->

    <!-- container DIV -->
    <DIV style="position:relative" >

    <!-- bunch of absolute positioned DIV -->
    <DIV style="position:absolute; top:20px; left:10px; width:400px; height:300px>
    <!-- some content -->
    </DIV>

    </DIV>

    I turned borders on so I can see where each DIV is and what I'm seeing is that although the INNER DIV is positioned "within" the outer DIV, the height of the outer DIV (as noticed by the borders) is only a few pixels high and doesn't match the inner DIVs (or the sum of the inner DIV heights). Is there a way to make the outer DIV height be the sum of its content heights?
    Wayne Christian

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    FL, USA
    Posts
    734
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why don't you try inverting the absolute with the relative..
    Put the absolute as the outer div and the relative as the inner...

    Like this.. It seemed to work for me

    --------

    <DIV style="position:absolute; top:20px; left:10px;border-style:solid;">

    <DIV style="position:relative;">

    HI THERE IS THERE ANYTHING OUT THERE!

    </DIV>

    </DIV>

    -------------

    Hope this helps
    CYWebmaster.com - See why we dot com!!
    ACJavascripts.com - Cut & Paste Javascripts!
    SimplyProgram.com - Personal Blog

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Posts
    462
    Thanks
    0
    Thanked 20 Times in 20 Posts
    change absolute containers to relative then place inside another table then add your absolute container around it.
    Examples here
    http://www.freewebs.com/dhcs/funmail/funmail.html
    NO Limits!! DHCreationStation.com
    ------------------------------------------------------------
    Broken items wanted for tinkerin'! PostItNow@BrokenEquipment.com
    Global Complaint Dept.


  •  

    Posting Permissions

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