CSS Styling Layouts Elements

CSS Example Design Templates. Layouts: header, nav, main, section, article, aside, footer

by ITpresent

HTML

<div id="wrap" align="center">
   <header>
    <h2>HEADER</h2>
   </header>
   <nav>
    <h2>NAVIGATION BAR</h2>
   </nav> 
  <main>
      <h2>MAIN</h2>
    <section>
      <h2>SECTION 1</h2>
     <article>
      <h2>ARTICLE 1</h2>
     </article>
     <article>
       <h2>ARTICLE 2</h2>
     </article>
    </section>
    <section>
       <h2>SECTION 2</h2>
     <article>
        <h2>ARTICLE 1</h2>
     </article>
     <article>
        <h2>ARTICLE 2</h2>
     </article>
     <article>
       <h2>ARTICLE 3</h2>
     </article>
    </section>
  </main>
    <aside>
       <h2>ASIDE</h2>
   </aside>
   <footer>
    <h2>FOOTER</h2>
   </footer>
  </div> 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  <br>
  <a href="https://itpresent.com/web/css/css_layouts.php" target="_blank">CSS Styling Layouts Elements</a>

CSS

#wrap {
width: 75%;
background-color: #56A5EC;
border: 6px ridge gray;
}
header {
background-color: aqua;
border: 2px ridge white;
padding: 2px;
margin: 5px;
}
nav {
background-color: white;
border: 2px ridge white;
height: 50px;
margin: 5px;
}
main {
background-color: #BCC6CC;
border: 2px ridge white;
display:inline-block;
width: 77%;
margin: 6px;
}
section {
background-color: green;
border: 4px ridge white;
width: 90%;
margin: 5px;
}  

article {
background-color: red;
border: 3px ridge white;
width: 90%;
height: 50px;
margin: 5px;
}

aside {
background-color: yellow;
border: 5px ridge white;
width: 15%;
float: right;
height: 530px;
margin: 5px;
}

footer {
background-color: blue;
border: 5px ridge white;
height: 50px;
margin: 5px;
}