why does my footer go under my sidebare?
CSS:
#body .footer .article {
background: none;
border-right: 1px solid #afafaf;
float: left;
margin: 0;
min-height: 590px;
overflow: auto;
padding: 0;
width: 600px;
}
#body .footer .article div {
float: none;
margin: 0;
overflow: hidden;
padding: 0 40px;
width: auto;
}
#body .footer .article span {
color: #000;
display: block;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: normal;
letter-spacing: 1px;
line-height: 30px;
margin: 0;
padding: 0;
text-align: justify;
}
#body .footer .article b a:hover {
color: #464646;
}
#body .footer .article img {
border: 1px solid #9d9d9d;
display: block;
float: left;
margin: 10px 20px 0 0;
}
#body .footer .article p {
color: #464646;
}
#body .footer .article p a {
color: #464646;
text-decoration: underline;
}
#body .footer .article p a:hover {
color: #115858;
}
#body .footer .article p a.more {
text-decoration: none;
}
#body .footer .article ul {
margin: 0;
overflow: hidden;
padding: 30px 0 0 40px;
}
#body .footer .article ul li {
float: left;
list-style: none;
margin: 0;
padding: 0 40px 20px 0;
width: 240px;
}
#body .footer .aside {
float: left;
margin: 0;
padding: 0;
width: 319px;
}
#body .footer .aside div {
border-bottom: 1px solid #9d9d9d;
margin: 0;
padding: 0 0 20px;
}
#body .footer .aside div a.figure {
display: block;
margin: 10px 0 10px 40px;
}
#body .footer .aside div a.figure:hover {
opacity: 0.8;
}
#body .footer .aside div a img {
border: 0;
display: block;
margin: 0;
padding: 0;
}
#body .footer .aside div p {
padding-left: 40px;
}
#body .footer .aside form {
margin: 0;
padding: 0;
}
#body .footer .aside form #fullname, #body .footer .aside form #email {
color: #000;
border: 1px solid #9d9d9d;
display: block;
font-size: 14px;
height: 38px;
line-height: 38px;
margin: 0 0 10px 40px;
padding: 0 5px;
text-transform: capitalize;
width: 267px;
}
#body .footer .aside form #subscribe {
background: url(../images/interface.png) no-repeat 0 -70px;
border: 0;
color: #6c6c6c;
display: block;
font-size: 14px;
height: 24px;
margin: 0 0 0 233px;
padding: 0;
text-indent: -99999px;
width: 86px;
}
#body .footer .aside form #subscribe:hover {
background-position: -135px -70px;
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="capture ability">
<meta name="description" content="Information on accessible photography">
<meta name="author" content="Louis Gaudry">
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tech1 - CaptureAbility</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div>
<a href="index.html" class="logo">
<h1>CaptureAbility</h1>"Capturing Dreams Beyond Barriers: Empowering Photographers of All Abilities!"</a>
</div>
<ul>
<li>
<a href="index.html">home</a>
</li>
<li>
<a href="technology.html">technology</a>
</li>
<li>
<a href="inspirational.html">Inspirational stories</a>
</li>
<li>
<a href="contact.html">contact</a>
</li>
</ul>
</div>
<div id="body">
<div id="blog">
<h3>Pacsafe Camsafe 75 Neck Strap</h3>
<h5>Camera Strap, July 16, 2020</h5><img src="images/neck-strap.jpg" width="209" height="200" alt="Image of a camera strap">
<p>I chose the Pacsafe Camsafe 75 neck strap. My reasoning for choosing it was. I have a hard time flipping a camera strap over my head. With this particular one, it has wiring inside the strap and covered in foam. That makes it more rigid and I’m able to pull it over my head.</p>
</div>
<div id="sidebar">
<div class="ex1">
<h3><strong>recent post</strong></h3>
<ul>
<li>
<a href="tech19">The Power of The Iphone</a>
</li>
<li>
<a href="tech18">Outdoor Camera Mount</a>
</li>
<li>
<a href="tech17">Wheelchair Camera Mount</a>
</li>
<li>
<a href="tech15">Accessiblity challenge is resolved in a dream</a>
</li>
<li>
<a href="tech14">Mini tripod's</a>
</li>
<li>
<a href="tech13">Fixed Lens Camera’s</a>
</li>
<li>
<a href="tech12">Creating a New Device</a>
</li>
<li>
<a href="tech11">The Accessible Tripod</a>
</li>
<li>
<a href="tech10">Accessible Device</a>
</li>
<li>
<a href="tech9">Window Photography</a>
</li>
<li>
<a href="tech8">So you want to control your camera with a tablet/cellphone</a>
</li>
<li>
<a href="tech7">Pixel Wireless Shutter Release Cable Timer Remote Control</a>
</li>
<li>
<a href="tech6">Panasonic Lumix Fz300 VS Nikon D5600</a>
</li>
<li>
<a href="tech5">How do I hold a Camera (Part 1)</a>
</li>
<li>
<a href="tech4">How do I hold a Camera (Part 2)</a>
</li>
<li>
<a href="tech3">Loupedeck+ Plus Photo and Video Editing Console</a>
</li>
<li>
<a href="tech2">Panasonic DMW-RSL1 Remote Shutter Release ( For Lumix FZ300 )</a>
</li>
<li>
<a href="tech1">Pacsafe Camsafe 75 Neck Strap</a>
</li>
</ul>
</div>
<div id="footer">
© 2024 CaptureAbility All rights reserved
</div>
</div>
</div>
</body>
</html>