How to make a parent div grow with its children?

Question

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>

it is, but how do i make it so that it grows with its children? for example if #container had a border and i wanted that border to automatically grow with whatever i put into it. — funk-shun, Jan 15 '11 at 01:43
Orbling is saying that it grows with its children by default. — BoltClock, Jan 15 '11 at 01:44
what the.....hmm i don't know why my code didn't earlier -__- — funk-shun, Jan 15 '11 at 01:51
i was getting the same problem, so i resolved it with this answers: http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing — Marcio Mazzucato, May 15 '12 at 17:21

Naatan · Accepted Answer · 2016-10-17T19:56:45.557

28

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

edited Oct 17 '16 at 19:56

answered Jan 15 '11 at 01:46

Naatan

3,424
4
32
51

2

Instead of using `
`, you can add `overflow: hidden` to the `#container` style. – BoltClock Jan 15 '11 at 01:49
@BoltClock that would just hide any content overflowing the height of the parent.. unless you are referring to a hack I'm unaware of, in which case; please tell us more :) – Naatan Jan 15 '11 at 02:49
3

Adding `overflow:hidden` works because many DOM elements completely ignore height settings unless they are explicitly instructed to do so. Using `overflow:hidden` will only work on children that are floating. – Michael Irigoyen Jan 15 '11 at 03:38
@Michael Irigoyen Are you aware as to the browser compatability of this handy little tool? Is it implemented by all browsers and IE? – dudewad Oct 22 '12 at 16:33

Michael Irigoyen · Answer 2 · 2011-01-15T03:36:47.753

22

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>

edited Jan 15 '11 at 03:36

answered Jan 15 '11 at 01:53

Michael Irigoyen

22,513
17
89
131

This is amazing! I've use so many long winded work around in the past! – Sean Lang Dec 17 '13 at 14:08

Jorge · Answer 3 · 2013-12-23T18:21:48.030

2

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

edited Dec 23 '13 at 18:21

answered Nov 04 '13 at 18:13

Jorge

831
13
18

score 1 · Answer 4 · edited Feb 01 '21 at 15:34

1

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

edited Feb 01 '21 at 15:34

Suraj Rao

29,388
11
94
103

answered Feb 01 '21 at 15:34

Adebiyi Adedotun

31
4

score 0 · Answer 5 · edited Aug 21 '15 at 15:55

0

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>

edited Aug 21 '15 at 15:55

kittykittybangbang

2,380
4
16
27

answered Aug 21 '15 at 15:06

thelimarenan

183
9

score 0 · Answer 6 · answered Apr 11 '19 at 11:50

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

How to make a parent div grow with its children?

6 Answers6

Linked