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

html css
Steve Horn picture Steve Horn · Dec 21, 2008 · Viewed 440.7k times · Source

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?

Answer

Dr Casper Black picture Dr Casper Black · Jan 2, 2011

Try this for the parent, it worked for me.

overflow:auto;

UPDATE:

One more solution that worked:

Parent:

display: table;

Child:

display: table-row;

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More