Back

Explore Courses Blog Tutorials Interview Questions

Expanding a parent <div> to the height of its children

0 votes
2 views
in Web Technology by (20.3k points)

I have a page structure similar to this:

<body>

  <div id="parent">

    <div id="childRightCol">

      /*Content*/

    </div>

    <div id="childLeftCol">

      /*Content*/

    </div>

  </div>

</body>

I would like for the parent div to expand in height when the inner div's height increases.

Edit:

One problem is that if the width of the child content expands past the width of the browser window, my current CSS puts a horizontal scrollbar on the parent div. I would like the scrollbar to be at the page level. Currently, my parent div is set to overflow: auto;

Can you please help me with the CSS for this?

1 Answer

0 votes
by (40.7k points)

You can try using the code given below for the parent like this:

overflow:auto; 

UPDATE:

Or else, you can use this code:

Parent:

display: table;

Child:

display: table-row;

Related questions

0 votes
1 answer
How to make a div 100% height of the browser window
asked Aug 1, 2019 in Web Technology by Tech4ever (20.3k points)
0 votes
1 answer
CSS - Expand float child DIV height to parent's height
asked Aug 29, 2019 in Web Technology by Tech4ever (20.3k points)
0 votes
1 answer
Get div height with plain JavaScript
asked Sep 6, 2019 in Web Technology by Tech4ever (20.3k points)

Browse Categories

© COPYRIGHT 2011-2023 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...