wac
09-06-2002, 08:24 PM
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?
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?