CODEWITHSUNDEEP
htmlcss
NLV
NLV

Reputation: 21661

Simple HTML rendering issue

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?

Upvotes: 4

Views: 154

Answers (6)

daniel__
daniel__

Reputation: 11845

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}

Upvotes: 0

framauro13
framauro13

Reputation: 797

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.

Upvotes: 0

userDEV
userDEV

Reputation: 535

Add attribute overflow: hidden to the .outer style.

Upvotes: 0

AdityaSaxena
AdityaSaxena

Reputation: 2157

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 :)

Upvotes: 1

Akki619
Akki619

Reputation: 2432

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;
}

Upvotes: 5

kumarharsh
kumarharsh

Reputation: 19629

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.

:)

Upvotes: 0

Related Questions