HTML div Elements

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>
			&nbsp;&nbsp;
			<a href="service.html">Services</a>
			&nbsp;&nbsp;
			<a href="terms.html">Terms</a>
			&nbsp;&nbsp;
			<a href="contact.html">Contact Us</a>
			&nbsp;&nbsp;
			<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">&nbsp;</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; 
}