How to make a parent div grow with its children?

Answer 1

Usually I create a fix class:

.clearfix{clear:both;}

Then, you can always use that when you need to.

<div class='wrapperContainer'>
    <div class="classFloated">
         Content
    </div>
    <div class="clearfix"></div>
    <div class="classFloated">
         Content
    </div>
    <div class="clearfix"></div>
</div>

Answer 2

If the content inside your <div> is floated, it won't expand. You can easily fix this by placing the overflow:hidden CSS style to the parent <div>. Note, this will not work if the children are all positioned absolutely. When you absolutely position an element, you're taking it out of the document flow. As far as positioning is concerned, that element is no longer a "child", even though semantically it still is.

<div style="overflow:hidden">
  <div style="float:left">
    <!--Content-->
  </div>
  <div style="float:left">
    <!--Content-->
  </div>
</div>

Answer 3

Using display:table in the parent div makes it grow even if its contents are floating elements. It makes the div behave like a table, basically.

Take a look to the display properties: http://www.w3.org/wiki/CSS/Properties/display

Answer 4

The only reason why your parent div would not grow with its content is if it's content is absolute positioned or is using floats, in the former case there is nothing you can do short of resizing it with javascript, in the latter you can put the following code at the end of your floating elements:

<br style="clear: both">

So say both the child elements in your example have a float, the code would look like this

<div id="container">
     <div id="child" style="height:100px;">
           ** CONTENT GOES HERE **
           <br style="clear: both">
     </div>
     <div id="child2" style="height:100px;">
           ** CONTENT GOES HERE **
           <br style="clear: both">
     </div>
</div>

You can use any node, as long as you use "clear: both" on it (So <div style="clear: both"></div> would work too).

Answer 5

Adding display:flex to the parent div may work.

For example, I wanted an unknown number of circles in a row, centered within an absolutely positioned div that expands as more are added in.

#grandparent{

  width:300px;
  height:20px;
  position:absolute;
  right:30;
  bottom:30;

}

#parent{

  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  display: flex;

}


.children{

   background-color: white;
   border-radius: 50%;
   width: 16px;
   height: 16px;
   margin-left: 3px;
   margin-right: 3px;

}

See https://codepen.io/anon/pen/zXwRza