Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML5 Web Page Layout</title> <style> body { font: 14px Arial,sans-serif; margin: 0px; } header { padding: 10px 20px; background: #acb3b9; } header h1 { font-size: 24px; } .container { width: 100%; background: #f2f2f2; } nav, section { float: left; padding: 20px; min-height: 170px; box-sizing: border-box; } section { width: 80%; } nav { width: 20%; background: #d4d7dc; } nav ul { list-style: none; line-height: 24px; padding: 0px; } nav ul li a { color: #333; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } footer { background: #acb3b9; text-align: center; padding: 5px; } </style> </head> <body> <div class="container"> <header> <h1>Tutorial Republic</h1> </header> <div class="wrapper clearfix"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <section> <h2>Welcome to our site</h2> <p>Here you will learn how to create websites...</p> </section> </div> <footer> <p>copyright © tutorialrepublic.com</p> </footer> </div> </body> </html>