Can anyone assist with resolving the issue I am encountering?
I currently have three nested divs as follows:
<div class="section">
<div class="parent">
<div class="child">
Some random text.
</div>
</div>
</div>
To adjust the parent's height based on the child's height, I utilized the following JavaScript code:
$(document).ready(function() {
var $holdme = $(".holdme");
$holdme.parent().height($holdme.outerHeight());
});
Unfortunately, this solution only functions correctly if the child element is not positioned absolutely. When I set .child to position:absolute, both the parent and child elements disappear. Is there an alternative approach to setting the child element to absolute positioning while still ensuring that the parent container adjusts its height according to the child's height?
You can view a working example in this fiddle link. Currently, it is functioning properly, but the child element does not have absolute positioning enabled. Removing the comment markup around position:absolute leads to complications.