CODEWITHSUNDEEP
htmlcss
Imran Qadir Baksh - Baloch
Imran Qadir Baksh - Baloch

Reputation: 33944

Auto increase the height of relative div if the height of inner absolute div increases?

I have the following html,

<div id="content">

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

</div>

with following css,

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

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

Now what I need to do is that whenevr the height of leftcol increases the height of content should be automatically increased. Here is the fiddle,

http://jsfiddle.net/2y97A/

Upvotes: 1

Views: 8691

Answers (2)

Chamara Keragala
Chamara Keragala

Reputation: 5777

You can't make the height of #content increase when #leftcol height is increased because the #leftcol is positioned absolute. You have to remove position:absolute; if you want make #content increase its height.

CSS Solution

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

#leftcol { 
 width: 500px;
}

See this DEMO

jQuery Solution

If you still want to keep #leftcol position absolute. You will need to use jQuery.

You can use the below jQuery Code

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

jQuery in action LIVE DEMO

Upvotes: 2

imcconnell
imcconnell

Reputation: 844

What's the reason for keeping the absolute positioning? Easiest way would obviously be to remove it, but if you can remove it on just one of them (#leftcol), it can be done like this:

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

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

Upvotes: 1

Related Questions