Grow Height of Parent Div That Contains Floating Nested Divs

Grow height of parent div that contains floating nested divs

If the parent container only has floating children, it will have no height. Adding the following CSS to the parent container should help:

.parent {
    overflow:hidden;
    width: 100%;
}

Read this article for more: http://www.quirksmode.org/css/clearing.html.

How can I expand floated child div's height to parent's height?

For the parent element, add the following properties:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

then for .child-right these:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Find more detailed results with CSS examples here and more information about equal height columns here.

Expanding a parent div to the height of its children

Try this for the parent, it worked for me.

overflow:auto; 

UPDATE:

One more solution that worked:

Parent:

display: table;

Child:

display: table-row;

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

---

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

CSS - how to set the height of a div when a nested div's height is set to fit-content?

When parent div(#outerDiv) has the relative position and child(#div1) has an absolute position then parent div can not resize itself to the child's size. So I changed some attributes and commented unnecessary parts. Also, I added contenteditable="true" style="outline: none;" to div1 and now it is easy to change size of the text and see the result:

#outerDiv {
  position: relative;
  background: darkblue;
  /* height: 400px; */
  width: 400px;
  padding-top: 100px;
  padding-bottom: 106px; /*height of boxes + 6px border top and bottom*/
}

#box1 {
  position: absolute;
  background: orange;
  height: 100px;
  width: 100px;
  border: 3px darkblue solid;
  bottom: 0;
  left: 0;
}

#box2 {
  position: absolute;
  background: orange;
  height: 100px;
  width: 100px;
  border: 3px darkblue solid;
  bottom: 0;
  right: 0;
}

#div1 {
  /* position: absolute; */
  margin: 0 auto;
  background: white;
  /* height: fit-content; */
  width: 250px;
  /* left: 75px;
  top: 100px; */
}

<div id="outerDiv">
  <div id="box1">
  </div>
  <div id="box2">
  </div>
  <div id="div1" contenteditable="true" style="outline: none;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel fringilla est ullamcorper eget nulla. Pharetra vel turpis nunc eget lorem dolor. At consectetur lorem donec massa sapien. Massa
    tempor nec feugiat nisl pretium fusce id velit. Orci ac auctor augue mauris augue neque gravida. Molestie a iaculis at erat pellentesque. Nisl vel pretium lectus quam id leo in. Quisque non tellus orci ac auctor augue mauris augue neque. Vestibulum
    sed arcu non odio euismod.
  </div>
</div>

have nested div fill up area within parent div

I think you might be looking for something like this.

.container {
  height:500px;
}

.container #parent {
  height:100%;
}

.container #parent .row {
  height:100%;
  position: relative;
}

.container #parent .row #child-left {
  height: 100%;
  width:30%;
  background-color: blue;
  float:left;
}

.container #parent .row #child-right {
  height: 100%;
  width:70%;
  background-color: yellow;
  float: right;

}

I am not sure what styles .container, #parent and row have, so I included what could possibly be their styles. But the meat of the of the answer/solution here is the last two blocks of the styles. The idea is that both children of the parent must have 100% height of whatever is containing them.

Check demo here: https://jsfiddle.net/an6t1yj3/

In case you can't, this is the output of the fiddle:

Floating left and parent height

add the property overflow:hidden to div A

Two nested divs are able to expand but not the parent

Use overflow to parent element, because your child divs floated:

<div style="overflow: hidden; background-color:#000; color:#FFFFFF; width:444px; height: auto;">

or use instead of

float:left; 

for childs

display: inline-block;

---

Related Topics