How to automatically resize the wrapper div using CSS


Tags: css,overflow,wrapper,hidden

Problem :

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?



Solution :

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


    CSS Howto..

    How can I center three tables in a div?

    How to get css or java class for specific part of code

    How to use an arrow for slideToggle indicator?

    How to fix misaligned rows alt the last records, after using vertical scroll and frozen column?

    How do I add the date a blog post was created in place of a bullet point under list-style-type?

    How to style an iframe?

    How to add a custom CSS file in ExtJs 5?

    CSS Cascading takes over inheritance, how to solve this?

    How to animate the filling of a html element

    how to override the ice:commandLink css

    How to fill Frameless grid dynamically?

    How to apply a CSS class on hover to dynamically generated submit buttons?

    How to style Anchor in GWT?

    How do I keep a horizontal column of divs in the same row when it is extends past the screen?

    How to get the profile pic aligned center?

    How to make link unclickable using CSS or jquery? [duplicate]

    How can I wrap content around a UL CSS Menu so content is seamless?

    How to replace 31 css classes with just one

    css how to stretch center div to fill allowable area

    How to create a label inside an element and style it?

    How to center icons in div consistently? [duplicate]

    How to change SVG color (when using the SVG as background in CSS)

    How to refer to an anchor pane in css?

    How to get rid of “margin”

    How to change transparency of background image using javascript?

    How to do make CSS Toggle like this? [closed]

    How to generate CSS with loop in less

    In CSS, how to grow the button + button image when the button is focused?

    How to select the first element from a selection when one element does not have a class via CSS?

    How to avoid Zalgo text bleeding all over place without totally removing it?