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

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;
}

CodePudding user response：

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 >
  <ul>
   <li><a href="#">HOME</a></li>
   <li><a href="#">ORIGIN</a></li>
   <li><a href="#">ABOUT</a></li>
   <li><a href="#">STUDY</a></li>
   <li><a href="#">ANIMATION</a></li>
  </ul>
</nav>

<div >
  <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>

CodePudding user response：

As someone has mentioned in the comments, position and float aren't made for that purpose. You can easily do what your trying to do with some flex and grid :)

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.nav {
  position: relative;
  width: inherit;
  height: 50px;
  background: purple;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: inherit;
  padding-top: 20px;
  flex-grow: 1;
  overflow-y: auto;
}

.wrap .con {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  width: 70%;
}

.section {
  grid-area: 1 / 1 / 2 / 3;
  padding: 10px;
  display: flex;
  justify-content: center;
}

.aside {
  grid-area: 1 / 3 / 2 / 4;
  padding: 10px;
  display: flex;
  justify-content: center;
}

.card {
  height: fit-content;
  padding: 10px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.aside .card {
  background: lightgray;
}

.foot {
  height: 60px;
  background: red;
}


/* you can delete this part*/

 ::-webkit-scrollbar {
  width: 20px;
}

 ::-webkit-scrollbar-track {
  background-color: transparent;
}

 ::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

 ::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

.middle {
  display: flex !important;
  justify-content: center;
  align-items: center;
  color: white;
}


/* you can delete this part */

<body>
  <div >
    <h1>Nav</h1>
  </div>
  <div >
    <div >
      <div >
        <div >
          <h1>section</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentiumnumquam blanditiis
            harum quisquam eius sed odit fugiat iusto fuga praesentium</p>
        </div>
      </div>
      <div >
        <div >
          <h1>aside</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,</p>
        </div>
      </div>
      <div >
        <div >
          <h3>Article</h3>
          <h3>Article</h3>
          <h3>Article</h3>
          <h3>Article</h3>
          <h3>Article</h3>
        </div>
      </div>
    </div>
  </div>
  <div >
    <h1>Footer</h1>
  </div>
</body>