I am currently in the process of setting up a website, focusing on arranging and formatting everything on the page before moving on to styling and adding JavaScript. I recently added three div tags after my form to create three separate columns in the next row. However, despite adding borders in my CSS to visualize the boxes and headings, nothing seems to be showing up. Any assistance in solving this issue would be greatly appreciated!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="operationStyle.css">
<title>Operation:Educate Children</title>
<script language="javascript" type="text/javascript">
image1=new Image();
image1.src="supermario.png";
image2=new Image();
image2.src="mario.png";
</script>
</head>
<body>
<header class="header">
<img src="mario.png" alt="header"/>
<h2>"Only the educated are free-Epictetus"</h2>
</header>
<table>
<tr>
<th><a href="educatedChilren.html">Home</a></th>
<th><a href="aboutUs.html">About Us</a></th>
<th><a href="currentProject.html">Current Project</a></th>
<th><a href="getInvolved.html">Get Involved</a></th>
<th><a href="Calendar.html">Calendar</a></th>
<th><a href="Donate.html">Donate</a></th>
</tr>
</table>
<div id="slideshow">
<img class="slide" name="slide" src="supermario.png" width="100" height="200">
<script>
var step=1;
function slideit(){
if(!document.images)
return;
document.images.slide.src=eval("image"+step+".src")
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
<div>
<div class="contact">
<h2>Contact Us!</h2>
<form action="contact.php" method="post">
<strong>Name:</strong>
<input type="text" name="name"><br></br>
<strong>E-Mail:</strong>
<input type="text" name="email"><br></br>
<strong>Message:</strong>
<textarea name="message" cols="25" rows="12"></textarea>
<input type="submit" value="Send">
<input type="reset" value="Clear">
</form
</div>
<div class="events">
<h3><strong>Upcoming Events</strong></h3>
</div>
<div class="follow">
<h3><strong>Follow Us!</h3></strong>
</div>
<div class="blog">
</div>
</body>
</html>
BODY{
margin-left:15%;
margin-right:15%;
}
.header h2{
color:blue;
text-align:right;
border:5px solid black;
font-family:'Bookman Old Style',serif;
font-size:10pt;
font-style:italic;
width:28%;
float:right;
height:200px;
}
.header img{
width:70%;
float:left;
border:thin black;
height:200px;
}
table{
border:5px solid black;
width:100%;
height:75px;
clear:left;
}
.slide{
border:5px solid black;
width:70%;
height:400px;
float:left;
}
.contact{
border:5px solid black;
width:27%;
height:400px;
float:right;
}
.contact h2{
text-align:center;
}
.contact form{
margin-left:2%;
}
img.slide{
position:absolute;
left:0;
top:0;
}
#slideshow{
position:relative;
overflow:hidden;
}
.events{
float:left;
width:33%;
border:black;
height:200px;
}
.follow{
float:left;
width:33%;
border:black;
height:200px;
}
.blog{
float:left;
width:33%;
height:200px;
border:black;
}