title: How to make my container grow accordingly to its containers inside him?
body: <p>My problem is this. I have container and inside him i have 2 more containers one of the containers i use to put image and other container i use to put header and paragraphs. I want to make something like short preview of a news and i will have multiple copies of this containers with different images and different headers and paragraph and i don't want to always adjust the height of the parent container i want to automatically adjust his height. Can i do that with CSS and how ?</p>
  
  <p>Here is example code</p>
  
  <pre><code>&lt;!-- First div is Bootstrap jumbotron --&gt;
  &lt;div class="jumbotron"&gt;
     &lt;div class="boxForNews"&gt;
        &lt;div class="boxForImage"&gt;
           &lt;img src=" "&gt;
        &lt;/div&gt;
        &lt;div class="boxForContent"&gt;
           &lt;h3&gt;Some Heading&lt;/h3&gt;
           &lt;p&gt;Random text Random text Random text Random text&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is CSS</p>
  
  <pre><code>.boxForImage{
      width:33%;
      float:left;
  }
  .boxForContent{
      width:66%;
      float:left;
  }
  </code></pre>
  
  <p>The containers inside boxForNews are growing accordingly to the elements i put inside them but their parent do not grow accordingly to the grow of the 2 containers and my jumbotron gets broken because of this.</p>
  
  <p>I Could give the first container some height but i the content i put inside the 2 containers inside him will always change and i will have to always play and change the height for every news i add.</p>