CODEWITHSUNDEEP
htmlcss
i suk at coding
i suk at coding

Reputation: 21

A Div with Children all Floated: How do I Make the Div have Enough Height to Contain its Children?

I have the classic problem where my outer div does not have any height, due to its children all being floated. I'm wondering if there is an easy fix (sans Javascript) so that I can preserve the behavior of the floated children while at the same getting the outer div to have height (so that the inner divs have a border around them).

Here's a fiddle that outlines the problem: http://jsfiddle.net/2fn73ck1/

CSS

#outer-div
{
    border: 1px solid red;
}

div.inner
{
    float: left; 
    width: 30%;
    border: 1px solid blue;
}

HTML

<div id="outer-div">
   <div class="inner">
       <p>Here's some content</p> 
    </div>
   <div class="inner">
       <p>Here's some more content</p> 
    </div>
       <div class="inner">
       <p>Here's even more content</p> 
    </div>        
</div>

Upvotes: 0

Views: 41

Answers (2)

Pau
Pau

Reputation: 538

Or you can simply:

#outer-div {
   display: inline-block;
}

Demo: http://jsfiddle.net/xp10xdq0/1/

OR

#outer-div {
   overflow: auto;
}

Demo: http://jsfiddle.net/xp10xdq0/

Your have the classic parent collapse problem and you can do further reading here:

http://css-tricks.com/all-about-floats/ (Read on The Great Collapse)

Upvotes: 1

tejas_spy007
tejas_spy007

Reputation: 448

#outer-div:after { content: " "; 
    display: block; 
    clear: both;}

Parent Div height doesn`t get adjusted to floated childs. Hence, simplest fix would be to add :after with no content and clear the float.

Upvotes: 0

Related Questions