How Come My Float Elements Aren't Within Their Parent

How come my float elements aren't within their parent

You need to "clearfix" the container div.

Floated elements are not considered when calculating the dimensions of a container, however there are several workarounds to get what you want.

The Simplest

Just add a div like this one as the last child in your container div:

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

As @Pekka comments there are many other ways to achieve the effect (without extra markup) listed in this SO question:

What methods of ‘clearfix’ can I use?

Floating elements within a div, floats outside of div. Why?

The easiest is to put overflow:hidden on the parent div and don't specify a height:

#parent { overflow: hidden }

Another way is to also float the parent div:

#parent { float: left; width: 100% }

Another way uses a clear element:

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }

div leaving parent when using float

Add

<div style="clear: both;"></div>

After the child div, inside the parent div. This clears the float you applied to the child div and should give you the effect you want.

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>

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 make the parent element fit its floated children as long as they aren't wider than the window?

Why not just set the parent's width the product of that of the maximum numbers of children with each child's width (if the child's width is constant)?

 var x = $(child).outerWidth();
 $(window).resize(function() {
      $(parent).width(Math.floor($(window).width() / x)*x);
 });

---

Related Topics