Div box inside another div not appearing - html

Question

I hope you are having a good day! I have created a div in where I put 3 info boxes. The boxes are just not appearing when I set the width and height with percentages. But if I set them with pixels, they appear. I want them to be in percentages, because I want the website to be fully responsive on every device it's accessed. Any tips?
HTML&CSS:
#info {
height: 50%;
background-color: red;
}
.infoBox {
width: 20%;
height: 35%;
background-color: blue;
float: left;
margin: 0 1%;
}
<div id="info">
<div class="infoBox" id="infoBox1">
</div>
<div class="infoBox" id="infoBox1">
</div>
<div class="infoBox" id="infoBox1">
</div>
</div>

Answer 1

Your boxe has an height calculated to 'auto' because #info's parent has no height explicitly specified.
https://www.w3.org/TR/CSS2/visudet.html#the-height-property
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.
Usually, you manage to inherit viewport's height from html through body all the way to your container
html,
body {
height: 100%;
}
#info {
height: 50%;
background-color: red;
}
.infoBox {
width: 20%;
height: 35%;
background-color: blue;
float: left;
margin: 0 1%;
}
<div id="info">
<div class="infoBox" id="infoBox1">
</div>
<div class="infoBox" id="infoBox2">
</div>
<div class="infoBox" id="infoBox3">
</div>
</div>
NOTE
https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

Answer 2

check now it is blank div so you have to give height in pixel or add content
.infoBox {
width: 20%;
min-height:200px;
background-color: blue;
float: left;
margin: 0 1%;
background-color:red;
}
#info {
height: 50%;
background-color: red;
}
.infoBox {
width: 20%;
min-height:200px;
background-color: blue;
float: left;
margin: 0 1%;
background-color:red;
}
<div id="info">
<div class="infoBox" id="infoBox1">
</div>
<div class="infoBox" id="infoBox2">
</div>
<div class="infoBox" id="infoBox3">
</div>
</div>