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..

    html element h1 with links as background image show them in one line

    How to animate two divs in html / css to make a semi-circle transition?

    How to add nav icon images using max-width property in CSS

    How to set responsively images on images to appear fixed using HTML+CSS+JS?

    How do I translate an image based on its height?

    How do I disable warnings from Aspx files (HTML,CSS)

    How to resize div with CSS by the border

    Two DIVs inside DIV. How to auto-fill the space of parent DIV by second DIV?

    I have a standard table with text inside. How do I vertical align this?

    How to add a google map icon to this code?

    How To Isolate a div from public CSS styles?

    How to style a completely different element when hovering over another element(with different parents)? [duplicate]

    CSS column-count and Chrome bug: how to avoid overflow content being cropped

    How to set CSS rule for a DIV in a LI of class UL?

    How can I apply jQuery .css style to descendant div [closed]

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

    How to change this table layout to a css layout?

    How do I hide text that is not wrapped in

    or ?

    How can i auto rotate this carousel

    jQuery glowing animations : how to improve?

    How many digits after the decimal point are interpreted in stylesheet rules?

    How to animate CSS Translate

    How to prevent css hover effects executing before you reach the element with your mouse?

    How to put images to the right and text to the left in css

    How to remove “pictureframe” in Internet Explorer?

    how to remove space in TR and TD

    How Do I Code a Popover in Rails 4.2.5 Using gem bootstrap-sass (Bootstrap 2)?

    CSS - How to line up buttons?

    How to create text block over the images with css and make it responsive

    How to make a small icon using css?