<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML Div Layout</title> <style> body { font: 15px Arial,sans-serif; margin: 1px; } .header { padding: 15px 25px; background: skyblue; } .header h1 { font-size: 20px; } .container { width: 110%; background: orange; } .nav, .section { float: left; padding: 25px; min-height: 150px; box-sizing: border-box; } .nav { width: 20%; background: purple; } .section { width: 70%; } .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> </head> <body> <div class="container"> <div class="header"> <h1 style="font-size:30px;">simmanchith Tutorial</h1> </div> <div class="wrapper clearfix"> <div class="nav"> <ul style="list-style:none; padding:0px; line-height:24px;"> <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> </div> <div class="section"> <h2>Welcome to simmanchith website</h2> <p>How to create websites.....</p> </div> </div> <div class="footer"> <p>© 2012 Sri Sivam Technologies. All rights reserved.</p> </div> </div> </body> </html>