CODEWITHSUNDEEP
htmlcss
funk-shun
funk-shun

Reputation: 4421

How to make a parent div grow with its children?

How do I make a parent/container DIV grow as more children DIV's are added.

<div id="container">
     <div id="child" style="height:100px;">
     </div>
     <div id="child2" style="height:100px;">
     </div>
</div>

Upvotes: 23

Views: 62088

Answers (6)

Adebiyi Adedotun
Adebiyi Adedotun

Reputation: 33

display: unset; or display: inline; works on the parent element.

Upvotes: 1

JohnG
JohnG

Reputation: 497

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

Upvotes: 0

Naatan
Naatan

Reputation: 3464

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).

Upvotes: 28

thelimarenan
thelimarenan

Reputation: 183

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>

Upvotes: 0

Jorge
Jorge

Reputation: 842

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

Upvotes: 2

Michael Irigoyen
Michael Irigoyen

Reputation: 22947

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>

Upvotes: 22

Related Questions