When I add extra text to the body of my homepage, it causes a distortion and pushes down the sidebar and advertising boxes on the side. I'm working on this project for class and even though I've asked my teacher for help, she says the code is fine and can't figure out why this is happening. Below is the HTML code for my homepage and the corresponding CSS style sheet:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="dio.css">
<link href='https://fonts.googleapis.com/css? family=Exo:400,700italic' rel='stylesheet' type='text/css'>
<script src="dio.js"></script>
<style>
#sidebar {
background: olive;
width: 20%;
height: 1000px;
float: left;
}
#advertising {
background: olive;
width: 20%;
height: 1000px;
float: right;
}
#footer {
height: 50px;
width: 1280px;
background: black;
text-align: center;
clear: both;
}
</style>
</head>
<body>
<header>
`
<div id="header" id="png">
<h1>DIO INC</h1></div>
<h3>Today is <span id = "dtField"></span>
</h3>
</header>
<div id="sidebar">
<h2>DIO WEBSITE</h2>
<nav>
<details>
<summary>Page Content</summary>
<ul>
<li>
<p>Please click <a href="dioPage2.html">About Us</a> to view our inoformation</p>
</li>
<li>
<p>Please click <a href="dioPage3.html">Services and Pricing</a> to view our services</p>
</li>
<li>
<p>Please click <a href="dioPage4.html">Contact Information</a> to view our contact information</p>
</li>
</ul>
</details>
<nav>
</div>
<div id="content">
</div>
<div id="advertising">
<p>Please click
<a href="http://www.ebay.com/sch/bananaman917_5/m.html?_nkw=&_armrs=1&_ipg=&_from="><img src="http://mssparky.com/wp-content/uploads/2010/11/ebay_logo.jpg" title=DIO width="150"></a> to view items for sale.</p>
</div>
<div id="footer"><strong>Copyright © 2016</strong></div>
<script type="text/javascript">
window.onload = initDate;
function initDate() {
var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var now = new Date();
var dtString = dayName[now.getDay()] + ", " + monName[now.getMonth()] + " " + now.getDate();
document.getElementById("dtField").innerHTML = dtString;
}
</script>
</body>
</html>
CSS:
h1 {
color:#ADFF2F;
text-align: center;
font-weight: bold;
}
h2 {
color:#ADFF2F;
text-align: lcenter;
font-weight: bold;
}
p, strong, summary, section, h3 {
color:#ADFF2F;
font-weight: bold;
}
a {
font-weight:bold;
text-decoration:none;
}
a, h1, h2, p, strong, summary, section, h3 {
font-family: 'Exo', sans-serif;
}
a:link {
color:#FF69B4;
}
a:active {
color:#e03a3e;
}
a:hover {
color:#e03a3e;
}
header {
height:100px;
width:1280px;
background:black;
text-align: center;
font-weight: bolder;
}
html {
background:url('trees.jpg') #98FB98 no-repeat;
background-size:cover;
}
body {
width:1280px;
height:1100px00px;
background:rgba(0,0,0,0.4);
}
content {
float:left;
height:1000px;
}
table {
width:1280px;
Height:1000px;
}
table, th, td {
border: 1px solid black;
padding:5px;
border-collapse:collapse;
color:#00FF00;
font-weight: bold;
}
thead {
background: #3056A0;
color: white;
font-weight: bold;
}
table > caption {
font-weight: bold;
}
tfoot {
font-size: 0.75em;
text-align:right;
font-weight: bold;
}
tbody tr:nth-child(even) {
background: #808000;
font-weight: bold;
}
tbody tr {
background: #808000
font-weight: bold;
}
footer {
height:50px;
width:1280px;
background:black;
text-align:center;
clear:both;
}