Why isn't my footer at the bottom of the page?

Question

I'm trying to get the footer of my code to the remain at the bottom of the page, but the footer is in the middle of my webpage.

I've looked up videos and tried following along, but nothing has seemed to work.

My code might look a little messy because I've taken bits and pieces from different Youtube videos, but the problem still stands.

body {
  margin: 0;
  padding: 0;
  background: #004882;
  height: 100px;
  display: flex;
  flex-direction: column;
}

html {
  height: 100px;
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 150px;
  display: black;
  background-color: #101010
  /* A lot of the information I got for making the header I got from this youtube video
     https://www.youtube.com/watch?v=GxwHXxumdQk
     */
}

.logo {
  height: 100%;
  display: table;
  float: left;
}

.logo h1 {
  color: white;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-family: "Lucida Console", Courier, monospace;
  font-size: 50px;
}

.logo h3 {
  color: white;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-family: "Lucida Console", Courier, monospace;
}

.navigation {
  float: right;
  height: 100%;
}

.navigation a {
  height: 100%;
  display: table;
  ;
  float: left;
  padding: 0px 20px;
}

.drop-down {
  display: table-cell;
  vertical-align: middle;
  ;
  height: 100%;
  color: white;
  font-family: monospace;
  background-color: gray;
  font-size: 20px;
}

.drop-down select {
  font-family: monospace;
  font-weight: bold;
  font-style: italic;
  font-size: 15px;
}

.drop-down button {
  font-family: monospace;
  background-color: gray;
  color: white;
  font-size: 20px;
}

.drop-down button:hover {
  background-color: #008B8B;
}

img {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  min-height: 100%;
}

.planets img {
  height: 300px;
  width: 300px;
}


/* I got some info on arranging the layout of the 
    imgaes from here
    https://stackoverflow.com/questions/12813573/position-icons-into-circle
    */

.planets {
  position: relative;
  width: 24em;
  height: 24em;
  padding: 2.8em;
  border: dashed 1px;
  border-radius: 50%;
  margin: 1.75em auto 0;
  flex: 1;
}

.planets a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

#footer {
  position: absolute;
  left: 0;
  height: 100px;
  width: 100%;
  background: black;
  color: white;
}

<div class="header">
  <div class="logo">
    <h1>Neighbors from Space</h1>
    <br>
    <h3> Created by Evan O'Grady</h3>
  </div>

</div>

<nav class="drop-down">
  <button type="button">About</button>

  <label for="planets-nav"><strong>Planets: </strong></label>
  <select id="planets">
    <option value="Mercury">Mercury</option>
    <option value="Venus">Venus</option>
    <option value="Earth">Earth</option>
    <option value="Mars">Mars</option>
    <option value="Jupiter">Jupiter</option>
    <option value="Saturn">Saturn</option>
    <option value="Uranus">Uranus</option>
    <option value="Neptune">Neptune</option>
  </select>

  <label for="references"><strong>References for: </strong></label>
  <select id="references">
    <option value="Mercury">Mercury</option>
    <option value="Venus">Venus</option>
    <option value="Earth">Earth</option>
    <option value="Mars">Mars</option>
    <option value="Jupiter">Jupiter</option>
    <option value="Saturn">Saturn</option>
    <option value="Uranus">Uranus</option>
    <option value="Neptune">Neptune</option>
  </select>



  <label for="contact"><strong>Contact: </strong></label>
  <select id="contact">
    <option value="email">Email</option>
    <option value="linkedin">LinkedIn</option>
    <option value="github">GitHub</option>
  </select>

</nav>

<section class="planets">
  <img src="C:\Users\evano\Downloads\Mercury.jpg" alt="Mercury">
  <img src="C:\Users\evano\Downloads\Venus.jpg" alt="Venus">
  <img src="C:\Users\evano\Downloads\Earth.jpg" alt="Earth">
  <img src="C:\Users\evano\Downloads\Mars.jpg" alt="Mars">
  <img src="C:\Users\evano\Downloads\Jupiter.jpg" alt="Jupiter">
  <img src="C:\Users\evano\Downloads\Saturn.jpeg" alt="Saturn">
  <img src="C:\Users\evano\Downloads\Uranus.jpg" alt="Uranus">
  <img src="C:\Users\evano\Downloads\Neptune.jpg" alt="Neptune">
</section>

<footer id="footer">
  <h1>This is a footer</h1>
</footer>


<!-- The info I get for making the footer is from this youtube video
      https://www.youtube.com/watch?v=KUHrMzN7ey8
     -->

Possibly a duplicate of https://stackoverflow.com/questions/18915550/fix-footer-to-bottom-of-page — Sam, Mar 14 '20 at 23:40
Does this answer your question? [Fix footer to bottom of page](https://stackoverflow.com/questions/18915550/fix-footer-to-bottom-of-page) — Sam, Mar 14 '20 at 23:40

score 1 · Answer 1 · answered Mar 14 '20 at 21:29

1

Add bottom: 0; to your footer selector in CSS:

#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: black;
    color: white;
}

answered Mar 14 '20 at 21:29

F.NiX

1,457
3
12
20

I tried this and it didn't work, my footer is still in the middle of my page. – Evan O'Grady Mar 14 '20 at 23:02

score 0 · Answer 2 · answered Mar 14 '20 at 23:15

0

Since you gave display:flex to the body, you could also use the possibilities of the flexbox and use align-self on the footer:

#footer {
        height: 100px;
        width: 100%;
        background: black;
        color: white;
        align-self: flex-end;
    }

It is supported in all modern browsers. If you have to serve older browsers, you might have to stick to position:absolute and bottom:0 for #footer.

Also your html and body are set to 100px height, which makes them smaller than your content. Consider setting them to 100% height. :-)

answered Mar 14 '20 at 23:15

MelStuch

21
2

I've tried doing that too, but it still hasn't worked. The images I've placed are overlapping over my footer, but the footer is still in the middle of the page. – Evan O'Grady Mar 15 '20 at 01:30
As Stephen said in his answer, you have many conflicting CSS properties. – MelStuch Mar 15 '20 at 07:34
The surrounding DIVs are often smaller than their content. You really need to set the heights of html and body to 100%. Also, you need to remove the restricting 'height:24em' from .planets. I didn't see that at first, because of the missing images. It would be best, if you went through your DOM DIV by DIV in the developer console of your browser and check the heights. – MelStuch Mar 15 '20 at 07:48

score 0 · Answer 3 · answered Mar 15 '20 at 05:02

You have CSS properties which are overriding the passive behavior which allows flex to push the footer to the bottom. To solve this, put everything which isn't your footer inside of a wrapper div, and then add a CSS rule to set the flex property of that wrapper to 1, and remove all the extra position: absolute rules and display types.

If you want a sticky footer, which will always be stuck to the bottom of the browser window, that's a little different. This is just to put the footer at the bottom of the content, for clarification.

<html>
<head>
    ...
</head>
<body> <!-- display: flex -->
    <div id="wrapper"> <!-- flex: 1 -->
        ...
    </div>
    <footer id="footer"> <!-- no extra rules required -->
        ...
    </footer>
</body>
</html>

Fiddle: https://jsfiddle.net/cxzpdkh2/

score 0 · Answer 4 · answered Mar 15 '20 at 07:23

0

try give the body position:relative

answered Mar 15 '20 at 07:23

Nourhan Ahmed

179
1
10

Why isn't my footer at the bottom of the page?

4 Answers4

Linked