HTML div Elements https://www.w3schools.com/tags/tag_div.asp Starter HTML5 Web Page Using div Elements Note: Later we will replace many of our div elements with HTML5 semantic elements. <div class="container"> <div id="header"> </div> <div id="menu"> </div> <div id="content"> <div id="sidebar"> </div> <div id="main"> </div> </div> <div id="footer"> </div> </div> Home Page div layout style.css body { text-align: center; } div { border: 1px dotted gray; } #header { min-height: 200px; } #header h1 { color:rgb(112,32,209); font-size:74px; } #menu { border-bottom-style: solid; border-bottom-color: red; border-bottom-width: 1px; height: 50px; font-size: 20px; } #content { min-height:200px; } #content div { min-height: 200px; } #sidebar { float: left; width:29%; } #main { float: right; width:70%; } #footer { vertical-align:bottom; min-height: 100px; } table, th, td { border: 1px dotted gray; border-collapse: collapse; } .red { color: red; } .currentpage { color: gray; } home.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Home Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="container"> <div id="header"> <h1>HOME PAGE</h1> </div> <div id="menu"> <strong><em class="currentpage">Home</em> <a href="service.html">Services</a> <a href="terms.html">Terms</a> <a href="contact.html">Contact Us</a> <a href="about.html">About Us</a></strong> </div> <div id="content"> <div id="sidebar"> Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area </div> <div id="main"> <p class="red">Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area</p> </div> <div class="clearfloat"> </div> </div> <div id="footer"> <p class="red">This page made with information from <a href="https://www.w3schools.com/html/html_links.asp" target="_blank">W3Schools.com</a>.</p> </div> </div> </body> </html> A Cleaner Border Stylesheet style.css body { text-align: center; } div { } #header { min-height: 200px; border-top: 1px dotted gray; } #header h1 { color:rgb(112,32,209); font-size:74px; } #menu { border-top: 1px dotted gray; border-bottom-style: solid; border-bottom-color: red; border-bottom-width: 1px; height: 50px; font-size: 20px; } #content { min-height:200px; } #content div { min-height: 200px; } #sidebar { float: left; width:29%; } #main { border-left: 1px dotted gray; float: right; width:70%; } #footer { border-top: 1px dotted gray; background-color: gray; vertical-align:bottom; min-height: 100px; } table, th, td { border: 1px dotted gray; border-collapse: collapse; } .red { color: red; } .currentpage { color: gray; } .clearfloat { clear: both; min-height: 0px !important; } Page navigation ↑ HTML5 and CSS3 ← HTML5: HTML5 Semantic Elements HTML5: Installing the WAMP Server →