Is it possible for a relative div to automatically adjust its height when the height of the inner absolute div increases?

Question

Is it possible for a relative div to automatically adjust its height when the height of the inner absolute div increases?

I am working with the following HTML code snippet:

<div id="content">

<div id="leftcol">
<p>Lorem Ipsum</p>
</div>

</div>

along with this CSS styling:

#content {
width: 780px;
padding: 10px;
position: relative;
background: #8b847d;
}

#leftcol { 
width: 500px;
position: absolute;
}

I want to make it so that when the height of 'leftcol' increases, the height of 'content' will automatically adjust accordingly. You can view an example in this fiddle:

http://jsfiddle.net/2y97A/

html css

Answer 1

Answer №1

Increasing the height of #content when the height of #leftcol is increased is not possible due to the absolute positioning of #leftcol. To achieve this, you must remove the position:absolute; from #leftcol.

CSS Resolution

#content {
 width: 780px;
 padding: 10px;
 position: relative;
 background: #8b847d;
}

#leftcol { 
 width: 500px;
}

View a demonstration DEMO

jQuery Resolution

If maintaining #leftcol as position absolute is necessary, jQuery can be utilized.

The following jQuery code can be implemented:

$(document).ready(function() {
    $("#content").each(function() {
        var newHeight = 0;
        $.each( $(this).children(), function() {
            newHeight = newHeight + $(this).height();
        });
        $(this).height( newHeight );
    });
});

See jQuery in action LIVE DEMO

Answer 2

Increasing the height of #content when the height of #leftcol is increased is not possible due to the absolute positioning of #leftcol. To achieve this, you must remove the position:absolute; from #leftcol.

CSS Resolution

#content {
 width: 780px;
 padding: 10px;
 position: relative;
 background: #8b847d;
}

#leftcol { 
 width: 500px;
}

View a demonstration DEMO

jQuery Resolution

If maintaining #leftcol as position absolute is necessary, jQuery can be utilized.

The following jQuery code can be implemented:

$(document).ready(function() {
    $("#content").each(function() {
        var newHeight = 0;
        $.each( $(this).children(), function() {
            newHeight = newHeight + $(this).height();
        });
        $(this).height( newHeight );
    });
});

See jQuery in action LIVE DEMO

Answer 3

Answer №2

Is there a specific rationale behind maintaining the absolute positioning? While it may seem straightforward to simply remove it, if you only want to remove it from #leftcol, you can achieve that with the following CSS:

#content {
width: 780px;
padding: 10px;
position: relative;
overflow: hidden;
background: #8b847d;
}

#leftcol { 
width: 500px;
float: left;
}

Answer 4

Is there a specific rationale behind maintaining the absolute positioning? While it may seem straightforward to simply remove it, if you only want to remove it from #leftcol, you can achieve that with the following CSS:

#content {
width: 780px;
padding: 10px;
position: relative;
overflow: hidden;
background: #8b847d;
}

#leftcol { 
width: 500px;
float: left;
}

Is it possible for a relative div to automatically adjust its height when the height of the inner absolute div increases?

Answer №1

Answer №2

Similar questions

Challenges with iFrame Resizing on Internet Explorer

Ensuring validation with Javascript upon submitting a form

Activate inactive html button using javascript

Bootstrap CSS: image is overlapping text inside a div

Scroll horizontally in a div with a minimum width while it is contained within a column using Bootstrap

Adjusting Bootstrap 4 Modal Transparency

What is the best way to prevent a jQuery hover event from adding a text-shadow to the CSS?

CSS - maximize the contrast between background and foreground colors in order to enhance

Uncertain about the ins and outs of AJAX

Manipulate only the elements inside the designated container

What causes child margins to extend beyond the boundaries of div elements?

Tips for Building Common Controller Logic in CakePHP

Modal Pop-ups Failing to Open on Subsequent Attempts

Unique hover tags such as those provided by Thinglink

Dismiss the pop-up box by clicking outside its borders

Searching for a method to locate and substitute a specific HTML string using the `sed` command in the macOS Catalina terminal

Class name that changes the cursor to a pointer shape in CSS

Challenges encountered while using Selenium WebDriver to upload images

When the button is clicked, I would like to use JavaScript to toggle the visibility of a div, allowing it to open and

Is there a way to stop jQuery dragging functionality from causing the page to scroll unnecessarily