Two column with header, footer and menu - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu

Description

Two column with header, footer and menu

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

body {<!-- w w w .ja  va 2 s .c om-->
   line-height: 1.8em;
}
#page {
   margin: 2% auto;
   width: 80%;
   overflow: hidden;
}
header {
   float: left;
   clear: both;
   width: 96%;
   background-color: red;
   padding: 2%;
   border-top-left-radius:10px;
   border-top-right-radius:10px;
}
nav {
   float: left;
   clear: both;
   width: 98%;
   padding: 1%;
   background-color: blue;
   font-size: 0.80em;
   display: inline;
   border-bottom-left-radius:10px;
   border-bottom-right-radius:10px;
}
nav ul {
   margin-bottom: 0;
}
nav ul li {
   display: inline;
   margin-right:2%;
}
#content {
   float: right;
   margin: 1% 0% 1% 1%;
   padding: 1% 1%;
   background-color: pink;
   width: 69%;
   height: 100%;
   border-radius: 10px;
}
aside {
   float: left;
   width: 27%;
   height: 100%;
   margin: 1% 1% 1% 0%;
   padding: 0% 0.001%;
   background-color: #FFB6C1;
   font-size: 0.80em;
   border-radius: 10px;
}
aside ul li {
   text-indent: 0.5em;
   padding: 0.3em;
}
footer {
   float:left;
   clear: both;
   width: 98%;
   padding: 1%;
   font-size: 80%;
   background-color: #efefef;
   text-align: center;
   border-bottom-left-radius:10px;
   border-bottom-right-radius:10px;
}
footer p {
   margin-bottom: 0;
}
p {
   margin-bottom: 1em;
}
img {
   float: left;
   padding: 5%;
   width: 70%;
   height: 60%;
   border-style: none;
}
nav a:link, nav a:visited {
   display: block, inline;
   width: 100%;
   font-weight: bold;
   color: #FFFFFF;
   background-color: red;
   text-align: center;
   padding: 1%;
   text-decoration: none;
}
nav a:hover, nav a:active {
   background-color: blue;
}


      </style> 
 </head> 
 <body> 
  <title>HTML 5 Liquid Layout</title> 
  <link rel="stylesheet" type="text/css" href="master.css"> 
  <div id="page"> 
   <header> 
    <h1>A responsive layout</h1> 
   </header> 
   <nav> 
    <ul> 
     <li> <a href="index.html">Home</a> </li> 
     <li> <a href="menu.html">Menu</a> </li> 
     <li> <a href="contact_us.html">Contact Us</a> </li> 
    </ul> 
   </nav> 
   <aside> 
    <ul> 
     <li>Category</li> 
     <li>Category</li> 
     <li>Category</li> 
    </ul> 
   </aside> 
   <div id="content"> 
    <h1>Main Content</h1> 
    <p> test test test test test test test test test test test test 
    test test test test test test test test test test test test 
    test test test test test test test test test 
    test test test test test test test test test test test test 
    test test test test test test test test test test test test 
    test test test </p> 
   </div> 
   <footer> 
    <p>Footer</p> 
   </footer> 
  </div>  
 </body>
</html>

Related Tutorials