The center-content element should adjust its height according to its child elements. However, if I apply float:left to one of its child elements, like the leftContent element, leftContent will extend 95% of its body outside the center-content. This is because the center-content's height does not adjust to contain the leftContent element.
If I remove the float:left from leftContent, the center-content element will adjust its height to keep the leftContent element inside. But why does applying float:left cause this issue?
In simpler terms, I want two small boxes - one floating left and another floating right - inside a larger box. The larger box should adjust its height based on the size of the child elements.
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>