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

Question

The element center-content should adjust it's height accordingly to it's childs element, however if I used float:left on one of it's childs such as the element leftContent, leftContent will contain 95% of its body outside the center-content. As the center-content height will not adjust to maintain the leftContent inside.

If I remove float:left from leftContent the element center-content will adjust it's height to maintain the leftContent element inside. Why does the float:left does that?

To simplify, I want two small box one float left another float right inside a big box. this big box should change its height accordingly to the childs.

HTML

#header, #footer, #content-wapper, section {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
#leftContent{
  display: inline-block;
  width: 49%;
  height: auto;
  float: left;
}

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 not just remove the float? you have made the element inline-block anyway — Pete, Sep 19 '17 at 13:19
I made it just for test purpose. But i want it float left. as its not guarantee that there will be anything on the right. — , Sep 19 '17 at 13:24
but if you have display inline-block your left and right will be side by side: https://jsfiddle.net/q93wpqpd/ — Pete, Sep 19 '17 at 13:25
True but only if there is a right element, the right element is not guaranteed to be there 100% of the time. — , Sep 19 '17 at 13:30
I don't understand what you are saying about the right element - if it's not there then it's not there: https://jsfiddle.net/q93wpqpd/2/, it doesn't matter if it's floated or not. Anyway floats were never designed for layout purposes so they shouldn't be used for it - in this day and age of css3, there is always a better alternative — Pete, Sep 19 '17 at 13:35
@Pete - What were floats designed for if not layout purposes? — Alohci, Sep 19 '17 at 13:45
@Alohci their main use was for images - to apply to an image so it would be positioned left or right and allow text to flow around it, but as there was only positioning absolute for doing this with other elements, people started to abuse floats and used it for positioning other elements too — Pete, Sep 19 '17 at 13:55
@Pete - position left or right is still a layout purpose, and there is no CSS3 better alternative for the text flow-around effect. — Alohci, Sep 19 '17 at 14:00
@Alohci I would state that text flowing around an image is more print based layout of content rather than template layout of elements - sorry, I know they're both layout but what I meant was floats were never intended for template layout - have a read of this: https://www.grandcircus.co/blog/why-ive-stopped-using-float-in-my-css/ (and there are many other articles along these lines) — Pete, Sep 19 '17 at 14:02

score 0 · Answer 1 · answered Sep 19 '17 at 13:12

You need to clear floats. For that there is trick called clearfix. You can use clear:both property too.

#header, #footer, #content-wapper, section {
   max-width: 100%;
   margin: 0 auto;
   text-align: center;
}
#leftContent{
   display: inline-block;
   width: 49%;
   height: auto;
   float: left;
}

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
}

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

<section class="center-content">
    <div id="leftContent clearfix">
        <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>

Can you explain in more detail what does clearfix is actually doing? — , Sep 19 '17 at 13:14
Floated objects do not add to the height of the object the reside in properly.All we need to do is clear the float, and this entire problem goes away. — Bharath Kumar, Sep 19 '17 at 13:16

score 0 · Answer 2 · answered Sep 19 '17 at 13:13

0

It's a very common problem, simply add a clearfix to you parent div:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

answered Sep 19 '17 at 13:13

JSEvgeny

2,550
1
24
38

score 0 · Accepted Answer · answered Sep 19 '17 at 13:18

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>

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

3 Answers3