title: Resize container DIV size according to content inside child DIV
body: <p>I've searched for a solution for my question but I haven't found it.<br>
  My case is, I have a DIV that acts like a container for a Post (for a project of mine, inside this post there are classes for the poster avatar, name, timestamp, text, etc). The problem is that, even though the DIV that has the text (post_text) resizes itself, the DIV that acts like a container doesn't, so this happen:</p>
  
  <p><em>Prints for better understanding:</em> <a href="http://imgur.com/a/j2HVX#0" rel="nofollow">http://imgur.com/a/j2HVX#0</a></p>
  
  <p><strong>This is my actual code:</strong></p>
  
  <pre><code>&lt;div class="post_container"&gt;
      &lt;div class="post_who"&gt;
          &lt;div class="post_avatar"&gt;&lt;img src="avatar2.png" /&gt;&lt;/div&gt;
          &lt;div class="post_name"&gt;Solange Campolina&lt;/div&gt;
          &lt;div class="post_timestamp"&gt;03/04/15&lt;br /&gt;15:34&lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="post_info"&gt;
              &lt;div class="post_title"&gt;Trabalho sobre fotografia&lt;/div&gt;
              &lt;div class="post_text"&gt;RANDOM PORTUGUESE WORDS: É importante questionar o quanto a determinação clara de objetivos estende o alcance e a importância de alternativas às soluções ortodoxas. A prática cotidiana prova que o início da atividade geral de formação de atitudes cumpre um papel essencial na formulação dos relacionamentos verticais entre as hierarquias. No entanto, não podemos esquecer que a contínua expansão de nossa atividade é uma das consequências das posturas dos órgãos dirigentes com relação às suas atribuições. O cuidado em identificar pontos críticos no fenômeno da Internet auxilia a preparação e a composição do orçamento setorial.&lt;span class="post_value"&gt;Valor: 3,0 E1AMP&lt;/span&gt;&lt;/div&gt;            
          &lt;/div&gt; 
          &lt;div class="post_links"&gt;
              &lt;a&gt;&lt;div class="post_button"&gt;
                      &lt;img src="icon_date.png" /&gt;&lt;span&gt;24/04/15&lt;/span&gt;
              &lt;/div&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;div class="post_button"&gt;
                      &lt;img src="icon_attachment.png" /&gt;&lt;span&gt;1&lt;/span&gt;
              &lt;/div&gt;&lt;/a&gt;
              &lt;a href="aluno_disciplinas_disciplina_comentarios.htm"&gt;&lt;div class="post_button"&gt;
                  &lt;img src="icon_comment.png" /&gt;&lt;span&gt;3&lt;/span&gt;
              &lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="post_divider"&gt;&lt;/div&gt;          
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>This is the simplified code, only with the important parts:</strong></p>
  
  <pre><code>&lt;div class="post_container"&gt;
      &lt;div class="post_who"&gt;
          &lt;!--Content!--&gt;
      &lt;/div&gt;
      &lt;div class="post_info"&gt;
          &lt;div class="post_title"&gt;&lt;!--Title!--&gt;&lt;/div&gt;
          &lt;div class="post_text"&gt;&lt;!--Content (text goes here)!--&gt;&lt;span class="post_value"&gt;Valor: 3,0 E1AMP&lt;/span&gt;&lt;/div&gt;            
      &lt;/div&gt; 
      &lt;div class="post_links"&gt;
          &lt;!--Buttons!--&gt;
      &lt;/div&gt;
      &lt;div class="post_divider"&gt;&lt;!--This is the light gray line that divides the posts!--&gt;&lt;/div&gt;          
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The CSS part:</strong></p>
  
  <pre><code>/*Relevant classes:*/
  
  .post_container{ 
  position: relative;
  min-height: 140px;
  height: auto;
  }       
  .post_info{
  position: absolute; 
  display: inline-block; 
  vertical-align: top; 
  margin: 20px 20px 0px 20px; 
  padding-bottom: 32px; 
  width: 550px;
  }
  .post_links{
  position: absolute;
  bottom: 5;
  left: 110px; 
  }
  .post_divider{ 
  background-color: #e8e8e8;
  height: 1px; 
  width: 85%; 
  position: absolute;
  right: 0; 
  bottom: 0;
  }
  .post_text{
  height: auto; 
  }
  
  /*Other classes:*/
  
  .post_who{ 
  display: inline-block; 
  margin: 10px; 
  font-style: italic; 
  font-size: 1.2em; 
  text-align: center;
  width: 75px; 
  }
  .post_avatar{
  border: 1px solid whitesmoke; 
  border-radius: 50%; 
  overflow: hidden;
  width: 60px;
  height: 60px;
  position: relative; 
  bottom: 0px; 
  margin: 15px 0 0 5px; 
  }
  .post_avatar img{ 
  vertical-align: middle; 
  display: block; 
  width: 60px; 
  min-width: 100%; 
  min-height: 100%; 
  }
  .post_name{ 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  width: 65px;
  }
  </code></pre>
  
  <p>The way I see, as the text grows in the 'post_text' DIV, the 'post_container' DIV should have it's height adjusted, since the height is set as auto. I tried setting an 'overflow: auto' to 'post_container' according to another question I saw here but all it did was add a scrollbar to it. I need to solve this without any scripts.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/3ck990zc/" rel="nofollow">http://jsfiddle.net/3ck990zc/</a> </p>