HTML Layout Elements

Layout Elemets: HEADER, NAV, MAIN, ASIDE, SECTION, ARTICLE

by ITpresent

HTML

<div id="wrap">
<br>
<div align="center">



  <header>
	<p>HEADER</p>
  </header>
	 <br>
<nav>
	<p>NAV BAR</p>
	</nav> 
  </div>
	<br><br>
   <main>
    <p>MAIN</p>
    <div align="center">
    <section>
      <p>SECTION 1</p>
     <article>
      <p>ARTICLE 1</p>

          </article>
    <br>
          <article>

            <p>ARTICLE 2</p>

         </article>
    <br>
        </section>

    <br><br>

	    <section>

          <p>SECTION 2</p>

         <article>

            <P>ARTICLE 1</P>

         </article>
    <br>

    <article>

      <p>ARTICLE 2</p>

    </article>
    <br>
     <article>

        <p>ARTICLE 3</p>

     </article>
<br><br>
    </section>
<br><br>
</div>
</main>

   <aside>
       <p>ASIDE</p>
   </aside>
<br><br>
	<div align="center">
 
  <footer>
    <p>FOOTER</p>
   </footer>
   <br>
 </div>
 </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 <br>
 <a href="https://itpresent.com/web/html/html_layouts.php" target="_blank">HTML layout Elements - Example</a>
 <br><br><br>

CSS

p {
  text-align: center;
  font-weight: bold;
  color: maroon;
}

#wrap {
border: 5px ridge black;
width: 75%;
}
header {
width: 95%;
border: 2px ridge maroon;
 }       


nav {
width: 95%;
border: 2px ridge maroon;
}


main {
border: 5px ridge red;
display: inline-block;
width: 75%;
margin-left:5px;
}

section {
border: 2px ridge green;
width: 90%;
display: inline-block;
} 

aside {
border: 3px ridge orange;
width: 16%;
float: right;
height: 600px;
display: inline-block;
margin: 5px;
}


article {
border: 3px ridge silver;
width: 90%;
}

footer {
border: 2px ridge blue;
width: 99%;
height: 50px;
}