title: How to automatically resize the wrapper div using CSS
body: <p>I've been struggling with this problem..</p>
  
  <p>There is a wrapper div and it contains 3 vertical column divs with full of texts,
  and this wrapper div has red background color so that it can be a background of
  the entire texts.</p>
  
  <pre><code>&lt;div id="content_wrapper"&gt;
  
      &lt;div id="cside_a"&gt;
         // massive texts goes here
      &lt;/div&gt;
  
      ... // two more columns go here.
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the CSS code for them.</p>
  
  <pre><code>#content_wrapper
  {
  background-color:#DB0A00;
  background-repeat:no-repeat;
  min-height:400px;
  }
  #cside_a, #cside_b, #cside_c
  {
  float: left;
  width: 33%;
  }
  </code></pre>
  
  <p>And this code gives me a background that covers only 400px height box..
  My expectation was the wrapper div automatically resizes depending on the
  size of the divs in it.</p>
  
  <p>Somehow <strong>putting "overflow:hidden" with wrapper CSS code  makes everything work fine</strong>.</p>
  
  <p>I have no idea <strong>why "overflow:hidden" works.. shouldn't this hide all the overflowed texts..?</strong></p>
  
  <p>Could anyone explain me why?
  Is is the correct way to do it anyway? </p>