I am facing an issue with my CSS-styled footer that floats at the bottom of the page. When I resize the browser window, the footer overlaps the contents of the page. Although the footer is quite large, it should not overlay the page content.
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
color: #64aba7;
}
strong {
color: #fff
}
.container {
min-height: 500px;
}
.header {
margin-top: 60px;
}
.header,
img {
display: block;
margin-right: auto;
margin-left: auto;
}
.content {
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
width: 500px;
}
.green-color {
color: #25b04b;
}
.dark-green {
color: #016838;
}
.footer {
width: 100%;
background: #00756f;
position: absolute;
bottom: 0;
}
.footer-container {
display: block;
margin-right: auto;
margin-left: auto;
width: 500px;
padding-top: 20px;
}
.font-size-12px {
font-size: 12px;
color: #64aba7;
font-weight: 50;
}
.one-third {
width: 30%;
float: left;
margin-right: 3%;
padding-bottom: 40px;
}<div class="container">
<div class="header">
<img src="images/logo-large.png" alt="LegalHQ">
</div>
<div class="content">
<h3 class="green-color">We are redevloping our website and will be back shortly</h3>
<h4 class="dark-green"><i>In the meantime don't hesitate to call or email us</i></h4>
<p class="dark-green">0330 999 1213
<br /><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82eae7eeeeedc2eee7e5e3eeafeaf3ace1edacf7e9">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="553d3039393a153930323439783d247b363a7b203e">[email protected]</a></a>
</p>
</div>
<div class="footer">
<div class="footer-container">
<div class="one-third img-div">
<img src="images/small-logo.gif" alt="LegalHQ">
</div>
<div class="one-third font-size-12px">
<strong>Legal HQ Limited</strong>
<br />Virginia House
<br />Floor 2
<br />5-7 Great Ancoats Street
<br />Manchester
<br />M4 5AD
<br />0161 974 0500
<br />
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42313732322d3036022e2725232e6f2a3339222962">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196a6c6969766b6d59757c7e7875347168377a76316d77">[email protected]</a></a>
<br />
<a href="www.legal-hq.co.uk">www.legal-hq.co.uk</a>
</div>
<div class="one-third font-size-12px">
<strong>Legal HQ Limited</strong> is regulated by the Ministry of Justice in respect of regulated claims management activities. <strong>Authorisation Number: CRM30929</strong>
<a href="www.claimsregulation.gov.uk">www.claimsregulation.gov.uk</a>
</div>
</div>
</div>
</div>Check out this link if you would like to experience the issue yourself. Try resizing the browser window to see the footer overlapping the main content.