4

I'm having a doubt in the basics of the HTML rendering. I'm having the following HTML/CSS.

http://jsfiddle.net/cgZ4C/2/

<style type="text/css">
.outer
{
    background-color:#DADADA;
    width:400px;
    border:1px solid silver;
    margin:auto;
    min-height:50px;
    padding:10px;
}

.content
{
    float:left;
    width:196px;
    min-height:20px;
    background-color:#BABABA;
    margin:2px;
}
</style>

<div class="outer">
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>

<div>

Why is the outer div not growing when the inner content grows? Even I tried adding some text inside .content divs. But still the .outer div is not growing?

NLV
  • 21,141
  • 40
  • 118
  • 183
  • 1
    `overflow: auto;` on outer div ? Reason: you have not cleared the contents. If you clear the contents, then you won't need overflow. Add a `div` after the contents: `
    `. Fiddle = http://jsfiddle.net/cgZ4C/9/     – Abhitalks Aug 14 '13 at 13:26
  • http://stackoverflow.com/questions/1642565/what-is-the-different-between-clearfix-hack-and-overflowhidden-vs-overflowauto Check this out on overflow:auto vs overflow:hidden – But I'm Not A Wrapper Class Aug 14 '13 at 13:31

6 Answers6

5

You need to add overflow property to your outer div and assign proper value to it like

overflow:hidden

Find what is the most suitable for your need here

Here is the possible code change you need:

.outer
{
    background-color:#DADADA;
    width:400px;
    border:1px solid silver;
    margin:auto;
    min-height:50px;
    padding:10px;
    overflow:hidden;
}
Akki619
  • 2,386
  • 6
  • 26
  • 56
1

CLEAR YOUR FLOATS! Always :-)

Add overflow:auto; like in this code: http://jsfiddle.net/cgZ4C/3/

Many CSS frameworks these days use a class clearfix . That has become the de facto standard. Twitter bootstrap uses it as well. What we need to do is just add a class clearfix to the outer div and you'll be done :)

AdityaSaxena
  • 2,147
  • 11
  • 16
0

It doesn't grow because all of your content within the parent is floated. When an element is floated, it is no longer taken into consideration by the parent when it calculates it's total size. Since every element is floated, as far as the parent is concerned there is no content, so it doesn't resize.

framauro13
  • 797
  • 2
  • 8
  • 18
0

Your code looks like a table so, with display:table (source) the element will behave like a table element.

http://jsfiddle.net/eWwtp/

.outer
{
    background-color:#DADADA;
    width:400px;
    border:1px solid silver;
    margin:auto;
    min-height:50px;
    padding:10px;
    display:table 

}

Another solution, that avoid these issues:

But with overflow hidden, more issues can arise where items outside of that div are hidden, or cut off (usually with menus etc).

http://jsfiddle.net/4LqaK/

Add: 

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

.clear{clear:both}
daniel__
  • 11,633
  • 15
  • 64
  • 91
0

Although Clearing floats is the correct way to go, sometimes, there is another way you can do this:

float your outer div too!!!

.outer {
  float: left;
}

This way, the outer will respect the floated children and expand, but you'll need to float the parent div of outer too, and so on, until there is a ancestor div which is cleared/<body> is encountered.

All floats are like bro's so go along with each other much better than non-floated non-cleared divs.

:)

kumarharsh
  • 18,961
  • 8
  • 72
  • 100
0

Add attribute overflow: hidden to the .outer style.

userDEV
  • 495
  • 4
  • 18