Confusion with height:auto [duplicate] - html

Question

This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
In the following scenario I do not understand why the height of the elements wrapper and content are not set correctly even though they are set to height: auto, meaning that the 2 divs with the class wrap are not displayed inside the wrapper and content divs.
I recreated the problem in this JSfiddle:
http://jsfiddle.net/202oy3k8/
The As you can see the two orange divs are not displayed inside the wrapper divs, even though the wrapper height is set to auto. What is causing this problem and how can I fix it?
HTML CODE:
<div id="wrapper">
<div id="content">
<div id="top">
</div>
<div class="dash"></div>
<p id="header">Header</p>
<div class="wrap">
</div>
<div class="wrap">
</div>
</div>
</div
CSS CODE:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
background-color: black;
margin-top: 2%;
width: 100%;
height: auto;
}
#content {
background-color: green;
width: 1224px;
height: auto;
margin: auto;
text-align: center;
}
#top {
background-color: pink;
height: 400px;
width: 60%;
margin: auto;
}
.dash {
width: 80%;
margin: auto;
margin-bottom: 1%;
height: 2px;
background-color: black;
}
p#header {
margin: 0;
text-align: center;
}
.wrap {
background-color: orange;
margin: 1%;
float:left;
width: 48%;
height: 400px;
}

Answer 1

You have to add a clear property to clear left float you have applied to .wrap divs.
What are float and clear for?
If you look in a typical magazine you’ll see images illustrating the
articles, with the text flowing around them. The float property in CSS
was created to allow this style of layout on web pages. Floating an
image—or any other element for that matter—pushes it to one side and
lets the text flow on the other side. Clearing a floated element means
pushing it down, if necessary, to prevent it from appearing next to
the float. Although floating was intended for use with any elements,
designers most commmonly use it to achieve multi-column layouts
without having to abuse table markup.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
background-color: black;
margin-top: 2%;
width: 100%;
height: auto;
}
#content {
background-color: green;
width: 400px;
height: auto;
margin: auto;
text-align: center;
}
#top {
background-color: pink;
height: 400px;
width: 60%;
margin: auto;
}
.dash {
width: 80%;
margin: auto;
margin-bottom: 1%;
height: 2px;
background-color: black;
}
p#header {
margin: 0;
text-align: center;
}
.wrap {
background-color: orange;
margin: 1%;
float: left;
width: 48%;
height: 400px;
}
.clear {
clear: left;
}
<div id="wrapper">
<div id="content">
<div id="top"></div>
<div class="dash"></div>
<p id="header">Header</p>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="clear"></div>
</div>
</div
Reference: w3.org - Floats and clearing - CSS-Tricks - What is "Float"?