CODEWITHSUNDEEP
htmlcssfooter
Anandha Kumar
Anandha Kumar

Reputation: 47

HTML footer overlapping with content

I have tried my html page footer is overlapping the body container.

here my html code with footer css.

<html>
  <head>
    <style>
         .footer {position: fixed;overflow: hidden;right: 0;bottom: 0;left: 0;z-index: 9999;}    
    </style>
  </head>
<body>

      <div class="container">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div><br>
 <div class="footer">
      <ul class="copy inline text-center">
        <li>©2016 - 2017 <a href="http://Example/"> Example</a></li>
        <li>All Rights Reserved</li>
      </ul>
 </div>
</body>
</html>

Upvotes: 2

Views: 5002

Answers (3)

TheYaXxE
TheYaXxE

Reputation: 4294

Not exactly sure of what you want. But if you want to prevent your footer from overlapping your container, you can solve it with these solutions:

Stick footer to bottom of page:

With this solution, the footer will always stick to the bottom of the page (not the window). If you don't have much content the footer will be at the bottom of the window, and if the content expands, the footer will move along.

html,
body {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
}

.container {
  min-height: 100%;
  height: auto;
  margin-bottom: -60px;
  box-sizing: border-box;
}

.container:after {
  display: block;
  content: '';
  height: 60px;
}

ul {
  padding: 0;
  margin: 0;
}

.footer {
  height: 60px;
  background: red;
}
<div class="container">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="footer">
  <ul class="copy inline text-center">
    <li>©2016 - 2017 <a href="http://Example/"> Example</a></li>
    <li>All Rights Reserved</li>
  </ul>
</div>

Working Fiddle

Stick footer to bottom of window:

The second solution is almost the same as yours, using position: fixed. To prevent overlapping with the content, you set a padding-bottom on .container as the same value as your footers height.

body {
  padding: 0;
  margin: 0;
}

.container {
  padding-bottom: 60px;
  box-sizing: border-box;
}

.footer {
  height: 60px;
  position: fixed;
  overflow: hidden;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: red;
}
<div class="container">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="footer">
  <ul class="copy inline text-center">
    <li>©2016 - 2017 <a href="http://Example/"> Example</a></li>
    <li>All Rights Reserved</li>
  </ul>
</div>

Working Fiddle

Upvotes: 1

GeorgeDopeG
GeorgeDopeG

Reputation: 175

Overlapping is caused by making footer's position fixed. try this code:

<html>
<head>
<style>
      </style>
.footer {overflow: hidden;right: 0;bottom: 0;left: 0;z-index: 9999;}    

 </head>
<body>

  <div class="container">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div><br>
 <div class="footer">
  <ul class="copy inline text-center">
    <li>©2016 - 2017 <a href="http://Example/"> Example</a></li>
    <li>All Rights Reserved</li>
  </ul>
</div>
</body>
</html>

Upvotes: 1

Alexander Nikolaenko
Alexander Nikolaenko

Reputation: 167

You need reset your styles. Just add margin: 0; to body. https://jsfiddle.net/36q5a7kw/

      <div class="container">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div><br>
 <div class="footer">
      <ul class="copy inline text-center">
        <li>©2016 - 2017 <a href="http://Example/"> Example</a></li>
        <li>All Rights Reserved</li>
      </ul>
 </div>


body{
  margin: 0;
}
.footer {
  position: fixed;
  overflow: hidden;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
 }

Upvotes: 2

Related Questions