Creating Website Layouts Using HTML5 Structural Elements - HTML CSS HTML

HTML CSS examples for HTML:Tag Style

  1. HOME
  2. HTML CSS
  3. HTML
  4. Tag Style

Description

Creating Website Layouts Using HTML5 Structural Elements

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>HTML5 Web Page Layout</title>
  <style type="text/css">
        body{<!--from w w  w  .j  a  v a  2  s  .c om-->
            margin: 0px;
        }
        header{
            background-color: #679BB7;
            padding: 10px;
        }
        header h1{
            font-size: 18px;
            margin: 10px 0;
        }
        .container{
            width: 80%;
            margin: 0 auto; /* Align container DIV horizontally center */
            background-color: #f0f0f0;
        }
        .sidebar{
            float: left;
            width: 20%;
            min-height: 1000px;
            background-color: #bbd2df;
        }
        .sidebar nav{
            padding: 10px;
        }
        nav ul{
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        nav ul li{
            margin-bottom: 5px;
        }
        nav ul li a{
            color: #3d677e;
        }
        nav ul li a:hover{
            text-decoration: none;
        }
        .content{
            float: left;
            width: 80%;
            min-height: 1000px;
        }
        .content section{
            padding: 10px;
        }
        section h2{
            font-size: 16px;
            margin: 0px;
        }
        .clearfix:after{
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        footer{
            background-color: #679BB7;
            padding: 10px;
        }
        footer p{
            text-align: center;
            margin: 5px;
        }
    </style>
 </head>
 <body>
  <div class="container">
   <header>
    <h1>tutorial</h1>
   </header>
   <div class="wrapper clearfix">
    <div class="sidebar">
     <nav>
      <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
      </ul>
     </nav>
    </div>
    <div class="content">
     <section>
      <h2>Welcome to our site</h2>
      <p>Here you will learn to create websites...</p>
     </section>
    </div>
   </div>
   <footer>
    <p>copyright &copy; java2s.com</p>
   </footer>
  </div>
 </body>
</html>

Related Tutorials