Parent Height Doesn't Follow Their Float Children

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/

Parent div doesn't recognise child's height if child element contains float:left

You need to clear the float element so that You can use :after & :before with clear:both

#header, #footer, #content-wapper, section {

  max-width: 100%;

  margin: 0 auto;

  text-align: center;

}

#leftContent{

  display: inline-block;

  width: 49%;

  height: auto;

  float: left;

}

.center-content:before, .center-content:after {

  content: "";

  clear: both;

  display: table;

}

input{

  width: 98%;

  height: 40px;

  border: solid 1px gray;

  background-color: white;

}

.center-content {

  width: 960px;

  max-width: 100%;

  margin: 0 auto;

  padding: 2vw 0 2vw 0;

  background-color: #E8E8E8

}

<section class="center-content">

    <div id="leftContent">

        <a><input name="income" type="text" id="income0" placeholder="Main Applicant Annual Income"></a><br>

        <a><input name="income" type="text" id="income1" placeholder="Main Applicant Any-other Income"></a><br>

        <a><input name="income" type="text" id="income2" placeholder="Second Applicant Annual Income"></a><br>

        <a><input name="income" type="text" id="income3" placeholder="Second Applicant Any-other Income"></a><br><br>

        <a><button class="btnCal" onclick="calculateMort()">Calculator</button></a>

    </div>

</section>

Grow height of parent div that contains floating nested divs

If the parent container only has floating children, it will have no height. Adding the following CSS to the parent container should help:

.parent {
    overflow:hidden;
    width: 100%;
}

Read this article for more: http://www.quirksmode.org/css/clearing.html.

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

Expanding a parent div to the height of its children

Try this for the parent, it worked for me.

overflow:auto;

UPDATE:

One more solution that worked:

Parent:

display: table;

Child:

display: table-row;

Parent div not expanding to children's height

Firstly, you are using height:100%; which in your case is wrong. For an explanation on why not to use height:100%, check this article;

To understand why, you need to understand how browsers interpret
height and width. Web browsers calculate the total available width as
a function of how wide the browser window is opened. If you don't set
any width values on your documents, the browser will automatically
flow the contents to fill the entire width of the window.

But height is calculated differently. In fact, browsers don't evaluate
height at all unless the content is so long that it goes outside of
the view port (thus requiring scroll bars) or if the web designer sets
an absolute height on an element on the page. Otherwise, the browser
simply lets the content flow within the width of the view port until
it comes to the end. The height is not calculated at all. The problem
occurs when you set a percentage height on an element who's parent
elements don't have heights set. In other words, the parent elements
have a default height: auto;. You are, in effect, asking the browser
to calculate a height from an undefined value. Since that would equal
a null-value, the result is that the browser does nothing.

Secondly, to make the outer-div (in this case #innerPageWrapper) wrap around the child elements, you should use overflow:hidden on this wrapper.

For this to successfully work, your child elements must not be position:absolute as you have for #contentMain and #contentSidebar, instead make these floats (float:left and float:right) and after the #contentSidebar div closes, add a <div style="clear:both"></div> to clear floats, allowing the parent to wrap around them perfectly.

I have put the required CSS in this Pastebin, note that you must clear your floats using a div as I mentioned above.

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.

How to fit a div's height to wrap around its floated children

This is a common issue when working with floats. There are several common solutions, which I have ordered by personal preference (best approach first):

Use the ::after CSS pseudo element. This is know as the 'clearfix', and works IE8 and up. If you need compatibility with earlier versions of IE, this answer should help. Example.
```
.parentelement::after {
    content: "";
    display: table;
    clear: both;
}
```
Add the two floats into a container with the CSS attribute overflow: auto or overflow: hidden. However, this approach can cause issues (e.g. when a tooltip overlaps the edges of the parent element a scrollbar will appear). Example.
```
<div style="overflow: auto">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>
```

Add a set height to the parent element. Example.

<div style="height: 200px">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

Make the parent element a float. Example.

<div style="float: left">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

Add a div after the floats with clear: both. Example.

<div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></div>

How to make a floated div 100% height of its parent?

For #outer height to be based on its content, and have #inner base its height on that, make both elements absolutely positioned.

More details can be found in the spec for the css height property, but essentially, #inner must ignore #outer height if #outer's height is auto, unless #outer is positioned absolutely. Then #inner height will be 0, unless #inner itself is positioned absolutely.

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

However... By positioning #inner absolutely, a float setting will be ignored, so you will need to choose a width for #inner explicitly, and add padding in #outer to fake the text wrapping I suspect you want. For example, below, the padding of #outer is the width of #inner +3. Conveniently (as the whole point was to get #inner height to 100%) there's no need to wrap text beneath #inner, so this will look just like #inner is floated.

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

I deleted my previous answer, as it was based on too many wrong assumptions about your goal.

Parent Height Doesn't Follow Their Float Children