Unable to stick footer to bottom of page-CodePudding

Working on a project for my bootcamp course, I was using my MacBook when writing the code for the index and it looked great. I have now switched over to my desktop and realized the footer is not at the bottom of my page. I have tried googling a solution but thus far nothing has worked to fix this. I also would have loved for my image links to have been a bit closer together but after playing around with the code, it doesn't seem to move. I also realized when making adjusting browser size it looks a bit off. I would greatly appreciate some assistance with this.

html {
  background-image: url(https://wallpaperaccess.com/full/2510671.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: auto;
}

html body {
  margin: 0;
  height: 100%;
  overflow: scroll;
}

.container {
  max-width: 100%;
  width: 100%;
}

h1 {
  color: rgb(85, 13, 134);
  font-family: 'Patrick Hand', cursive;
  font-size: 80;
  text-align: center;
  font-weight: 900px;
  border-style: rounded;
  border-color: bisque;
  border: solid;
  background-color: rgba(230, 181, 213, 0.726);
  border-radius: 10em;
  border-width: 3;
  padding: 2;
  width: 900px;
  height: 110px;
  margin: auto;
  margin-top: 30;
  letter-spacing: 2;
}

#left {
  display: flex;
  justify-content: center;
  padding: 160;
  float: left;
  margin-inline-start: auto;
}

#right {
  display: flex;
  justify-content: center;
  padding: 160;
  float: right;
  margin-inline-start: auto;
}

img {
  height: 200px;
  width: 400px;
}

footer {
  text-align: center;
  color: rgb(85, 13, 134);
  font-family: 'Patrick Hand', cursive, Arial, Helvetica, sans-serif;
  font-size: 16;
  font-weight: 60px;
  letter-spacing: 2;
  postion: fixed
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Patrick Hand&display=swap" rel="stylesheet">
  <title>Cheatsheet</title>
</head>
<header>
  <h1>HTML and CSS Cheatsheet</h1>
</header>

<body>
  <div>
    <a href="HTML /index.html">
      <img src="images/HTML logo.svg" id="left" width="800" height="200"></a>
  </div>
  <div>
    <a href="CSS Sheet/index.html">
      <img src="images/CSS Logo.svg" id="right" width="800" height="200"></a>
  </div>
  <footer>
    <p>Created by: Stephanie M.</p>
    <p>Connnect with me: [email protected]</p>
  </footer>
</body>

</html>

CodePudding user response：

To have the footer be at the bottom of the page, try using fixed positioning and bottom: 0;, along with 100% width so that its content can be centered as you have right now:

html {
  background-image: url(https://wallpaperaccess.com/full/2510671.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: auto;
}

html body {
  margin: 0;
  height: 100%;
  overflow: scroll;
}

.container {
  max-width: 100%;
  width: 100%;
}

h1 {
  color: rgb(85, 13, 134);
  font-family: 'Patrick Hand', cursive;
  font-size: 80;
  text-align: center;
  font-weight: 900px;
  border-style: rounded;
  border-color: bisque;
  border: solid;
  background-color: rgba(230, 181, 213, 0.726);
  border-radius: 10em;
  border-width: 3;
  padding: 2;
  width: 900px;
  height: 110px;
  margin: auto;
  margin-top: 30;
  letter-spacing: 2;
}

#left {
  display: flex;
  justify-content: center;
  padding: 160;
  float: left;
  margin-inline-start: auto;
}

#right {
  display: flex;
  justify-content: center;
  padding: 160;
  float: right;
  margin-inline-start: auto;
}

img {
  height: 200px;
  width: 400px;
}

footer {
  text-align: center;
  color: rgb(85, 13, 134);
  font-family: 'Patrick Hand', cursive, Arial, Helvetica, sans-serif;
  font-size: 16;
  font-weight: 60px;
  letter-spacing: 2;
  
  position: fixed;
  bottom: 0;
  width: 100%;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Patrick Hand&display=swap" rel="stylesheet">
  <title>Cheatsheet</title>
</head>
<header>
  <h1>HTML and CSS Cheatsheet</h1>
</header>

<body>
  <div>
    <a href="HTML /index.html">
      <img src="images/HTML logo.svg" id="left" width="800" height="200"></a>
  </div>
  <div>
    <a href="CSS Sheet/index.html">
      <img src="images/CSS Logo.svg" id="right" width="800" height="200"></a>
  </div>
  <footer>
    <p>Created by: Stephanie M.</p>
    <p>Connnect with me: [email protected]</p>
  </footer>
</body>

</html>

CodePudding user response：

try this:

footer {
  text-align: center;
  color: rgb(85, 13, 134);
  font-family: 'Patrick Hand', cursive, Arial, Helvetica, sans-serif;
  font-size: 16;
  font-weight: 60px;
  letter-spacing: 2;
  postion: fixed
  //add this
  bottom: 0;
  left: 0;
}