<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML5 Web Page Layout</title> <style> body { font: 15px Arial,sans-serif; margin: 1px; } header { padding: 10px 20px; background:skyblue; } header h1 { font-size: 20px; } .container { width: 110%; background: green; } nav, section { float: left; padding: 20px; min-height: 170px; box-sizing: border-box; } section { width: 70%; } nav { width: 20%; background: purple; } nav ul { list-style: none; line-height: 25px; padding: 0px; } nav ul li a { color:skyblue; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } footer { background: skyblue; text-align: center; padding: 5px; } </style> <html> <body> <div class="container"> <header> <h1 style="font-size:30px;">simmanchith Tutorial</h1> </header> <div class="wrapper clearfix"> <nav> <ul> <li><a href="#" style="color:blue;">Home</a></li> <li><a href="#" style="color:red;">About</a></li> <li><a href="#" style="color:yellow;">Contact</a></li> </ul> </nav> <section> <h2>Welcome to simmanchith website</h2> <p>How to create websites.....</p> </section> </div> <footer> <p>© 2012 Sri Sivam Technologies. All rights reserved.</p> </footer> </div> </body> </html>