Question

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‘