Why Is the Parent Div Height Zero When It Has Floated Children

Height of parent div is zero even if it has child with finite heights

Seems like you got a case for the clearfix class.

So I'm guessing you're floating the child div and that's why the parent div's height is 0.
When you use floats, the parent doesn't adapt to the height of the children.

You can apply the 'clearfix' classes to the parent of the floating elements (of course you need to have it in your stylesheet) and it will add an insivible '.' at the end. Your parent will then have the correct height.

Note, it's cross platform, compatible IE6 +, Chrome, Safari, Firefox, you name it!

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Why is the parent div height zero when it has floated children

Content that is floating does not influence the height of its container. The element contains no content that isn't floating (so nothing stops the height of the container being 0, as if it were empty).

Setting overflow: hidden on the container will avoid that by establishing a new block formatting context. See methods for containing floats for other techniques and containing floats for an explanation about why CSS was designed this way.

Parent Height doesn't follow their float children

Add overflow:hidden; to the container:

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;

    overflow: hidden; /* <--- here */
}

Because its content is floated, the container div collapses. Using a 'clearfix' class or, as I mentioned, adding overflow:hidden will cause the container to contain the floated elements.

UPDATE Explanation of why this works can be found here: https://stackoverflow.com/a/9193270/1588648

... and here:

In order for them (browsers) to calculate what overflowed the bounds of the block (and thus should be hidden), they needed to know the size of the block. Because these blocks do no have an explicit height set, the browsers used the calculated height of the content instead.

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

div height: 0; without any floating child elements?

<span> should be <ul> or <li> should be <span> or any inline-elements to make a valid code. best is to use <ul><li><a> for a list of links.

position:absolute;(or fixed) takes element out of the natural flow of the page, so <nav> have no content to make it grow.

CSS: Floating divs have 0 height

It's not because the floating divs doesn't have a height, it's because the floating divs don't affect the size of the parent element.

You can use the overflow style to make the parent element take the floating elements in consideration:

#outer { overflow: auto; }

Why are my div s leaving their parent div ?

Parents will normally expand to the height of their children, though won't in case the children are floated.

• You can remove floats to accomplish expanding.
• In order to expand a parentdiv based on floated children try overflow: auto; on .pictureBox. This will make .pictureBox expand to the height of its children. Here's a Fiddle showing the result.

Child component still displays even though parent has height of zero

You need to set the overflow property of the parent to hidden.

<div style={{overflow: hidden; height: "0px"}}>

When child divs are floated, parent divs lose auto-height

Contain your floats.

On the div called main add overflow:hidden;. That should contain it.

---

Related Topics