I'm currently working on building a responsive div that contains a section and an aside. The parent div should take up 25% of the height. I want the child divs to occupy 80% of the parent container. However, I'm running into issues with the child divs not taking up the correct height when using percentage values. Strangely, everything works fine when I switch to pixel values. Can anyone point out where I might have made a mistake? Below is the HTML code snippet:
<div class="container">
<section>
This is where the section content goes
</section>
<aside>
This is the aside content
</aside>
</div>
And here is the corresponding CSS:
.container{
width: 100%;
background: red;
height: 25%;
}
.container::before,
.container::after{
content: "";
display: table;
}
.container::after{
clear: both;
}
section{
float: left;
width: 40%;
height: 100%;
display: block;
}
aside{
float: right;
width: 40%;
height: 80%;
}
section, aside{
background: green;
border-radius: 6px;
margin: 5%;
}
If you'd like to see the code in action, here is a link to my fiddle: https://jsfiddle.net/gvpmahesh/Lhpv0k2x/3/