How to automatically resize the wrapper div using CSS

Question

Hi, I've been struggling with this problem..

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.

<div id="content_wrapper">

    <div id="cside_a">
       // massive texts goes here
    </div>

    ... // two more columns go here.

</div>

And here is the CSS code for them.

#content_wrapper
{
background-color:#DB0A00;
background-repeat:no-repeat;
min-height:400px;
}
#cside_a, #cside_b, #cside_c
{
float: left;
width: 33%;
}

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.

Somehow putting "overflow:hidden" with wrapper CSS code makes everything work fine.

I have no idea why "overflow:hidden" works.. shouldn't this hide all the overflowed texts..?

Could anyone explain me why? Is is the correct way to do it anyway?

Answer 1

Your problem is caused by the fact that your columns are floating. Take a look at 'Clearfix'

Answer 2

you need to clear your floats. add the following after your third column.

<div class="clear"></div>

and this to your css

.clear {clear:both;float:none;}