Footer DIV floating in body text

Question

I'm working on the CSS for a website for a project and my Footer DIV has decided it wants to get out and see the wide world. All the elements inside the footer are displaying correctly, they're just deciding to float over the top of my content DIV/

I've tried an absolute to get the thing to stay put and had zero luck with that. It will stay put if i used a 'fixed' but I'm not happy with how that looks.

This is how the footer is defined in my CSS sheet.

footer {
float: left; 
width: 960px; 
height: 40px; 
background-image: url("images/footer.jpg");
background-repeat: no-repeat;}

Here's how the Footer is implemented at the bottom of the Index.html page

<div id="footer" class=copyright>
<p>Copyright 2019- Nature Snap Photography Site Maintained by____</p>
</div>
</div>
</body>
</html>

Its because of the `float:left`. Might take look at [sticky footer](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Standard, Oct 01 '19 at 07:51

score 0 · Answer 1 · answered Oct 01 '19 at 07:54

 <style>{
      margin: 0px;
    }

    .grid-container {
      height: 100vh;
      display: grid;
      grid-template-columns: auto;
      grid-template-rows: 50px auto 50px;
      grid-template-areas:
        'header'
        'content'
        'footer';
    }

    .header {
      background-color: red;
      border-bottom: solid black 2px;
    }

    .content {
      background-color: blue;
      border-bottom: solid black 2px;

    }

    .footer {
      background-color: green;
      border-bottom: solid black 2px;

    }

    </style>

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>

  <body>
    <div class="grid-container">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>
  </body>

</html>

I think you should take a look at CSS Grid, it makes tedious tasks like these much simpler to deal with.

Footer DIV floating in body text

1 Answers1