how to put article below section and aside, but above footer - html

Question

so at first i was just doing a section and aside, with footer at bottom. no problem, they were where i wanted, now i want to add another
so i want the yellow bit which is the article to be centered below the achievements and favorites section, but above footer. i've been messing around with positions, clear, float, margins and i'm losing my sanity for this assignment that's due next week. So far all i've managed to achieve is either putting it behind or on top of the section and article.
please help.
keep in mind: i have to have a liquid page layout
body{
background:white;
margin:0;
font-family:arial;
margin-left:0;
margin-right:0;
}
#typeAbout{
font-family:'Fira Mono', monospace;
text-align:center;
position:relative;
color:black;
font-size:40px;
margin:0.5%;
width:max-content;/*this is interefering with text alignment for some reason*/
}
#typeAbout::before,
#typeAbout::after{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
#typeAbout::before{
background:white;
animation:typewriter 2s steps(11) 500ms forwards;/*steps stand for letter characters*/
}
#typeAbout::after{
width:0.125em;
background:black;
animation:typewriter 2s steps(11) 500ms forwards, blink 500ms steps(11) infinite;
}
#keyframes typewriter{
to{
left:100%;
}
}
#keyframes blink{
to{
background:transparent;
}
}
.navbar ul{
top:0;
list-style:none;
text-align:center;
background:purple;
margin:0;
margin-top:0;
padding:0.5%;
box-shadow:0 0 40px 0;
}
.navbar li{
display:inline-block;
}
.navbar a{
text-decoration:none;
text-align:center;
color:black;
width:100px;
display:block;
padding:10% 10%;
text-transform:uppercase;
}
.navbar a:hover{
background:lightgray;
}
section{
font-family:'Fira Mono', monospace;
position:absolute;
float:left;
width:28%;
height:50%;
margin-top:1%;
margin-bottom:5%;
margin-left:20%;
padding-left:1%;
background-color:white;
border-radius: 10px;
box-shadow:2px 2px 2px 2px lightgray;
}
aside{
float:right;
width:25%;
height:100%;
margin-top:1%;
margin-right:20%;
padding-left:1%;
background-color:lightgray;
border-radius: 10px;
box-shadow:2px 2px 2px 2px lightgray;
}
article{
position:inital;
background:yellow;
clear:both;
}
footer{
position: absolute;
bottom:0;
clear:both;
width:100%;
height:10%;
background-color:red;
}

Answer 1

Maybe you can try something like this. You didn't provide all your code so I just made something similar with your code. Let me know
body{
background:white;
margin:0;
font-family:arial;
margin-left:0;
margin-right:0;
}
#typeAbout{
font-family:'Fira Mono', monospace;
text-align:center;
position:relative;
color:black;
font-size:40px;
margin:0.5%;
width:max-content;/*this is interefering with text alignment for some reason*/
}
#typeAbout::before,
#typeAbout::after{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
#typeAbout::before{
background:white;
animation:typewriter 2s steps(11) 500ms forwards;/*steps stand for letter characters*/
}
#typeAbout::after{
width:0.125em;
background:black;
animation:typewriter 2s steps(11) 500ms forwards, blink 500ms steps(11) infinite;
}
#keyframes typewriter{
to{
left:100%;
}
}
#keyframes blink{
to{
background:transparent;
}
}
.navbar ul{
top:0;
list-style:none;
text-align:center;
background:purple;
margin:0;
margin-top:0;
padding:0.5%;
box-shadow:0 0 40px 0;
}
.navbar li{
display:inline-block;
}
.navbar a{
text-decoration:none;
text-align:center;
color:black;
width:100px;
display:block;
padding:10%;
text-transform:uppercase;
}
.navbar a:hover{
background:lightgray;
}
.wrapper{
display: flex;
justify-content: space-evenly;
}
section{
font-family:'Fira Mono', monospace;
width:100%;
height:auto;
margin-top:1%;
margin-bottom:5%;
margin-left:20%;
padding-left:1%;
background-color:white;
border-radius: 10px;
box-shadow:2px 2px 2px 2px lightgray;
}
aside{
width:100%;
height:100%;
margin-top:1%;
margin-right:20%;
padding-left:1%;
background-color:lightgray;
border-radius: 10px;
box-shadow:2px 2px 2px 2px lightgray;
}
article{
position:inital;
background:yellow;
clear:both;
}
footer{
position: absolute;
bottom:0;
clear:both;
width:100%;
height:10%;
background-color:red;
}
<nav class="navbar">
<ul>
<li>HOME</li>
<li>ORIGIN</li>
<li>ABOUT</li>
<li>STUDY</li>
<li>ANIMATION</li>
</ul>
</nav>
<div class="wrapper">
<div>
<section>This is the achievements</section>
</div>
<div>
<article> This is your article</article>
</div>
<div>
<aside> This is your Favourite</aside>
</div>
</div>