How to make a parent div grow with its children?

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>

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