CODEWITHSUNDEEP
htmlcsscss-float
Sharif
Sharif

Reputation: 728

Floating element overlapping the main page content

I've a footer styled with CSS which floats at the bottom of the page but when I re-size browser window my footer overlaps my page contents footer is quit big though but 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:[email protected]">[email protected]</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:[email protected]">[email protected]</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>

Here is link if you want to experience it yourself. Try and re-size the browser window to the point where you would see footer overlapping the main content.

Upvotes: 1

Views: 80

Answers (1)

Gho
Gho

Reputation: 568

give the html,body height of 100%, get the footer out of the container, remove position absolute, remove floats from the div-children, and add display:inline-block to them and give them widths of 28% (or remove whitespaces between them) (or otherwise you should use text-align:center for container...but that's another story)

Upvotes: 1

Related Questions