How Can the Parent Div Auto Resize Its Height Based on the Child'S Height

How can the parent div auto resize its height based on the child's height?

I made a very simple example for you to see how variable parent height works.

.parent{    height: auto;    border: 1px dashed #f00;    padding: 5px;}
.child{    height: 100px;    border: 1px dashed #0f0;}

<div class="parent">    <div class="child">    </div></div>

Have parent DIV height auto-size based on child DIV height

Here is another attempt. Wrap your absolutely place elements in <div class='absolute-panel'>:

<div class='resultsbox'>
    <div class='absolute-panel'>
        <div class='reviewtitle'>    
          <strong>Fun</strong>
        </div>
        .
        .
        .
        <div class='reviewstatsright'>    
            <span class='text-info'>
                <dt>Rate</dt><dd>$50</dd>
            </span>
            <span class='text-info'>
                <dt>Tip</dt><dd>$10</dd>
            </span>
        </div>
    </div><!-- .absolute-panel -->
    <div class='reviewbody'>
        <p>What a great time!</p>
         <cite>-Rodger</cite>
    </div>
</div>

For the CSS:

.absolute-panel {
    border: 1px solid blue;
    width: 800px;
    height: 150px;
    position: relative;
    left: 0px;
    right: 0px;
}

For the .resultsbox, take out the absolute positioning...

.resultsbox {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: #DDD;
    border-radius: 5px;
    border-left: 1px solid red;
}

For the .reviewbody take out the absolute positioning... and add 40px bottom padding (if needed):

.reviewbody {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 40px;
    border: 1px dotted red;
}

Comment

I added some colored borders to keep track of things and these can be removed.

The trick is to define a fixed height panel to add all your precisely positioned elements.

After this, add your review body which has a variable height.

The fiddle: http://jsfiddle.net/audetwebdesign/8mRVp/

Expanding height of parent div based on children's height

This is because you have set the image to position: absolute; which will take it out of the flow causing the parent elements to act as if it wasn't there.

Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements.

Position (https://developer.mozilla.org/en-US/docs/Web/CSS/position)

Remove position: absolute; from .builder_img and the parent containers will react to its height.

#builder_container {  width: 100%;  /*overflow: auto;*/  position: relative;  padding: 8px;  border: 1px solid #ccc;  margin-bottom: 15px;  display: inline-block;  clear: both;}#builder_contents {  background: #000;  width: 100%;  height: 100%;  position: relative;  display: block;}.builder_img {  width: 100%;  height: auto;}

<div id="builder_container">  <div id="builder_contents">    <img class="builder_img" src="http://coolspotters.com/files/photos/1036167/adidas-st-girls-straw-hat-profile.png" />  </div></div>

Child div auto resize to its parent

Originally I was going to answer with the same solution as @Mihai-t but I realised a css grid solution, in my opinion, is more elegant and appropriate:

#a {  grid-area: a;}
#b {  grid-area: b;}
#c {  grid-area: c;}
#container {  display: grid;  grid-gap: .5rem;  grid-template-columns: auto auto;  grid-template-areas:     "a"     "b"     "c";}
@media (min-width: 700px) {  #container {    grid-template-areas:       "a b"       "a c";  }}
@media (min-width: 1200px) {  #container {    grid-template-areas:       "b a c";  }}
.item {  padding: 1rem;  background-color: #333;  border-radius: 0.3rem;  color: #fff;  font-weight: 500;  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  font-size: 14px;  line-height: 1.42857143;}

<div id="container">  <div id="a" class="item">    <h1>Left</h1>  </div>  <div id="b" class="item">    <p>Right Top</p>  </div>  <div id="c" class="item">    <p>Right bottom</p>  </div></div>

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.

Auto resize child div to fill available space of parent div

I would leverage the magic of flex!

flex: 0 0 32%; On child1 sets the width to 32%.

flex: 1; to the child2 means: Fill all the available space. So if the child1 disappears, child 2 will fill all the remaining space.

.parent {
  width: 400px;
  height: 200px;
  display: flex;
}

.child1 {
  flex: 0 0 32%;
  background-color: green;
}

.child2 {
  flex: 1;
  background-color: red;
}

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

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 Can the Parent Div Auto Resize Its Height Based on the Child'S Height