I'm in the process of updating my website and have come across an issue with the footer placement on one specific page. Typically, the footer stays at the bottom of all pages except for this particular page where it appears floated to the left instead of at the bottom where it should be. Below is the code snippet for that specific page:
HTML
<aside class="expert">
<h2>Always a Satisfied Customer</h2>
<ul class="b">
<li>Upfront Pricing</li>
<li>Affordable Rates</li>
<li>Courteous and Respectful</li>
<li>Always On Time</li>
</ul>
</aside>
<aside class="refer">
<p>I would recommend EJP to anyone and everyone! They showed up, looked at my issue, and fixed it promptly. They are simply the best! <br />-Tim S.</p>
</aside>
<p>EJP Electric offers repairs, upgrades, and installations, delivering high customer satisfaction by getting the job done right the first time.</p>
<footer>
<div id="footer">
<address>EJP Electric<br />
8603 E M115<br />
Cadillac, MI 49601<br />
231-775-3799<br />
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9eecffe7defbf4eefbf2fbfdeaecf7fdb0fdf1f3">[email protected]</a>">Email</a>
</address>
</div>
</footer>
CSS
.expert {
background-color: white;
display: block;
border: solid;
float: right;
right: 20px;
padding: 3px;
}
.refer {
background-color: white;
border: solid;
float: right;
clear: right;
width: 150px;
display: block;
margin-top: 5px;
padding: 5px;
}
#footer {
position: absolute;
width: 600px;
font-size: 12px;
float: left;
}