0

I'm having problems forcing my footer to be at the bottom of my website, I know people have posted about simular problems and gotten help but I've tried using those aswell.

I've tried everything I can get my hands on, Botton: 0; doesn't work. Placing my footer in a div, to use position:relative: instead of absolute. Can't wrap my head around why it won't work. I am very new to HTML and CSS and my coding is really inefficient and ugly but try to overlook it for now.

html {
     position: relative;
     min-height: 100%;
}
 body {
     background-color: rgb(43, 43, 43);
     margin: 0;
     min-height: 100%;
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr auto;
     font-family: "Signika Negative", sans-serif;
}
/*-------HotBar-----*/
 .hotbar {
     position: fixed;
     top: 0;
     left: 0;
     height: 50px;
     width: 100%;
     border: 0px solid #000;
     background-color: rgb(32, 32, 32);
     display: grid;
     grid-template-columns: 50px repeat(4, 1fr);
     grid-column-gap: 15px;
    /* align-content: center;
     */
     z-index: 3;
}
 .hotbar a {
     top: 0;
     width: 1fr;
     margin-right: 20px;
     border: none;
     border-radius: 10px;
     background-color: rgb(32, 32, 32);
     color: rgb(255, 253, 253);
     display: grid;
     font-size: unset;
     height: 50px;
     text-decoration: none;
     align-content: center;
     justify-content: center;
}
 .hotbar img {
     height: 46px;
     margin-left: 20px;
     margin-top: 2px;
}
 @media screen and (max-width: 500px) {
     body {
         margin-top: 180px;
    }
     .hotbar {
         padding-bottom: 200px;
         grid-template-columns: 1fr;
         grid-column-gap: 0;
         grid-row-gap: 0;
         margin-left: 10px;
    }
}
 .hotbar .hem {
     background-color: rgb(32, 32, 32);
}
 #a:hover, #b:hover, #c:hover, #d:hover {
     background-color: rgba(90, 90, 90, 0.274);
}
 .hotbar a img:hover {
     rotate: 450deg;
}
 .hotbar img {
     transition: rotate 4s;
}
/*--------/HotBar/---------*/
/* -------1.html-------- */
 h1 {
     display: grid;
     position: absolute;
     font-size: 45px;
     top: -105px;
     place-self: center;
     color: rgb(223, 223, 223);
     background-color: rgb(32, 32, 32);
     padding: 5px 40px 5px 40px;
     border-radius: 10px 10px 0px 0px;
}
 #adiv {
     display: grid;
     position: absolute;
     border: 1px solid rgb(131, 81, 81);
}
 .headimg {
     margin-top: 150px;
     display: grid;
     height: 300px;
     width: 85%;
     position: relative;
     z-index: 1;
     background-color: rgb(32, 32, 32);
     justify-self: center;
     background: url(../../Bilder/Galaxfront.png) no-repeat center center;
     background-size: cover;
     border: 10px solid rgb(32, 32, 32);
     border-left: 20px solid rgb(32, 32, 32);
     border-right: 20px solid rgb(32, 32, 32);
     border-radius: 10px;
}
 #adivtxt {
     display: flex;
     position: relative;
     place-self: center;
     margin-top: 20px;
     border: 10px solid rgb(32, 32, 32);
     border-left: 20px solid rgb(32, 32, 32);
     border-right: 20px solid rgb(32, 32, 32);
     border-radius: 10px;
     height: fit-content;
     width: 85%;
     background-color: rgb(32, 32, 32);
     grid-template-columns: repeat(2, 1fr);
}
 #firsttxt p {
}
/* ---------/1.html/--------- */
/* ---------Kontakt---------- */
 h2 {
     color: white;
}
 label {
     color: white;
}
 input[type="text"], select, textarea {
     color: white;
     background-color: rgb(43, 43, 43);
     width: 100%;
     padding: 12px;
     border: 1px solid rgb(255, 255, 255);
     border-radius: 4px;
     box-sizing: border-box;
     margin-top: 6px;
     margin-bottom: 16px;
     resize: vertical;
     font-family: unset;
}
 #showModal {
     background-color: rgb(83, 83, 83);
     border: 1px solid #fff;
     color: white;
     padding: 12px 20px;
     border-radius: 4px;
     cursor: pointer;
     font-family: unset;
}
 #showModal:hover {
     background-color: rgb(53, 53, 53);
}
 #diap {
     color: white;
     font-family: unset;
}
 #modal {
     border: 1px solid #fff;
     background-color: rgb(43, 43, 43);
     border-radius: 5px;
     width: 50%;
     height: fit-content;
}
 #okbutton {
     display: grid;
     position: relative;
     background-color: rgb(83, 83, 83);
     border: 1px solid #fff;
     color: white;
     padding: 5px 50px;
     border-radius: 4px;
     cursor: pointer;
     text-decoration: none;
     font-family: unset;
     justify-self: center;
     justify-content: center;
}
 .kontakt {
     margin-top: 50px;
     border-radius: 5px;
     background-color: rgb(43, 43, 43);
     padding: 20px;
}
 input:focus {
     outline: none;
}
 textarea:focus {
     outline: none;
}
/* ---------/Kontakt/--------- */
/* ---------Footer---------- */
 body #footer {
     border: 1px solid rgb(207, 102, 102);
     position: absolute;
     bottom: 0;
}
 body footer {
     display: flex;
     flex-direction: row;
     background-color: rgb(32, 32, 32);
    /* border: 1px solid rgb(114, 66, 66);
     */
     width: 100%;
     height: 50px;
     align-content: center;
     padding: 5px 0px;
}
 footer a, p {
     text-decoration: none;
     align-self: center;
     margin: 20px;
     color: white;
}
 footer a:hover {
     color: rgb(116, 114, 114);
}
/* -------/Footer/------- */
    <!DOCTYPE html>
    <html lang="sv">
       <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge" />
          <title>Hem - Vi i Universum</title>
          <link rel="stylesheet" href="1.css" />
          <link
             href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300&display=swap"
             rel="stylesheet"
             />
       </head>
       <body id="abody">
          <!-- Alla -->
          <div class="hotbar">
             <div class="logo">
                <a class="hem" href="https://gb7v56.csb.app/Sidor/1/1.html">
                <img src="../../Bilder/Logo.png" alt=""
                   /></a>
             </div>
             <a id="a" href="https://gb7v56.csb.app/Sidor/1/2.html">Vår Galax</a>
             <a id="b" href="https://gb7v56.csb.app/Sidor/1/3.html">Vårt Solsystem</a>
             <a id="c" href="https://gb7v56.csb.app/Sidor/1/4.html">Vår Planet</a>
             <a id="d" href="https://gb7v56.csb.app/Sidor/1/5.html">Forskning</a>
          </div>
          <!-- Alla -->
          <!-- Ind -->
          <div id="adiv">
             <div class="headimg">
                <h1>Vi i Universum</h1>
             </div>
             <div id="adivtxt">
                <p>
                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos
                   voluptatem dolorum non exercitationem molestiae voluptas eius! Cum
                   expedita in repellat labore saepe, odit eos nihil rerum assumenda
                   dolorum praesentium tenetur quidem facilis dolorem recusandae
                   voluptates iure aliquid magnam quas suscipit eaque alias nisi? Magnam
                   officiis deserunt natus, quisquam quae accusantium.
                </p>
                <p>
                   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa
                   explicabo porro est, corporis debitis possimus vero fugit minus,
                   quisquam consequatur eos molestias. Doloribus reiciendis culpa quam,
                   quod numquam itaque eos accusamus nam accusantium, quaerat, enim quos
                   deleniti sit voluptatibus voluptatem. Culpa aut porro ullam aliquid
                   fugiat nam corrupti!
                </p>
             </div>
          </div>
          <!-- Ind -->
          <!-- Footer -->
          <div id="footer">
             <footer>
                <p>© Linkvard & Co 2023</p>
                <a href="https://gb7v56.csb.app/Sidor/Footer/Kontakt.html">Kontakt</a>
                <a href="">Om Oss</a>
             </footer>
          </div>
       </body>
    </html>
com.on.ist
  • 177
  • 1
  • 10
Linus Hultin
  • 1
  • 1
  • I tried many of those examples but none worked for me. Ex, adding padding to bottom of the body didn't do anything for some reason. When using the bottom: 0; and position : relative; for the footer the footer is placed in the middle of my page. The other Css code must be interfering with this somehow. – Linus Hultin May 07 '23 at 00:29

1 Answers1

0

If you want the footer to stay at the bottom of the screen when scrolling, you have to set "position" to "fixed" and "z-index" to "1" so the footer is not overlapped by other elements. Or is your question meant in another way?

If you want the footer to just be below the content, like pointed out in the comment, it's best to give the footer and "adiv" the property "position: relative;". I've changed that here in the code now.

 html {
     position: relative;
     min-height: 100%;
}
 body {
     background-color: rgb(43, 43, 43);
     margin: 0;
     min-height: 100%;
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr auto;
     font-family: "Signika Negative", sans-serif;
}
/*-------HotBar-----*/
 .hotbar {
     position: fixed;
     top: 0;
     left: 0;
     height: 50px;
     width: 100%;
     border: 0px solid #000;
     background-color: rgb(32, 32, 32);
     display: grid;
     grid-template-columns: 50px repeat(4, 1fr);
     grid-column-gap: 15px;
    /* align-content: center;
     */
     z-index: 3;
}
 .hotbar a {
     top: 0;
     width: 1fr;
     margin-right: 20px;
     border: none;
     border-radius: 10px;
     background-color: rgb(32, 32, 32);
     color: rgb(255, 253, 253);
     display: grid;
     font-size: unset;
     height: 50px;
     text-decoration: none;
     align-content: center;
     justify-content: center;
}
 .hotbar img {
     height: 46px;
     margin-left: 20px;
     margin-top: 2px;
}
 @media screen and (max-width: 500px) {
     body {
         margin-top: 180px;
    }
     .hotbar {
         padding-bottom: 200px;
         grid-template-columns: 1fr;
         grid-column-gap: 0;
         grid-row-gap: 0;
         margin-left: 10px;
    }
}
 .hotbar .hem {
     background-color: rgb(32, 32, 32);
}
 #a:hover, #b:hover, #c:hover, #d:hover {
     background-color: rgba(90, 90, 90, 0.274);
}
 .hotbar a img:hover {
     rotate: 450deg;
}
 .hotbar img {
     transition: rotate 4s;
}
/*--------/HotBar/---------*/
/* -------1.html-------- */
 h1 {
     display: grid;
     position: absolute;
     font-size: 45px;
     top: -105px;
     place-self: center;
     color: rgb(223, 223, 223);
     background-color: rgb(32, 32, 32);
     padding: 5px 40px 5px 40px;
     border-radius: 10px 10px 0px 0px;
}
 #adiv {
     display: grid;
     position: relative;
     border: 1px solid rgb(131, 81, 81);
}
 .headimg {
     margin-top: 150px;
     display: grid;
     height: 300px;
     width: 85%;
     position: relative;
     z-index: 1;
     background-color: rgb(32, 32, 32);
     justify-self: center;
     background: url(../../Bilder/Galaxfront.png) no-repeat center center;
     background-size: cover;
     border: 10px solid rgb(32, 32, 32);
     border-left: 20px solid rgb(32, 32, 32);
     border-right: 20px solid rgb(32, 32, 32);
     border-radius: 10px;
}
 #adivtxt {
     display: flex;
     position: relative;
     place-self: center;
     margin-top: 20px;
     border: 10px solid rgb(32, 32, 32);
     border-left: 20px solid rgb(32, 32, 32);
     border-right: 20px solid rgb(32, 32, 32);
     border-radius: 10px;
     height: fit-content;
     width: 85%;
     background-color: rgb(32, 32, 32);
     grid-template-columns: repeat(2, 1fr);
}
 #firsttxt p {
}
/* ---------/1.html/--------- */
/* ---------Kontakt---------- */
 h2 {
     color: white;
}
 label {
     color: white;
}
 input[type="text"], select, textarea {
     color: white;
     background-color: rgb(43, 43, 43);
     width: 100%;
     padding: 12px;
     border: 1px solid rgb(255, 255, 255);
     border-radius: 4px;
     box-sizing: border-box;
     margin-top: 6px;
     margin-bottom: 16px;
     resize: vertical;
     font-family: unset;
}
 #showModal {
     background-color: rgb(83, 83, 83);
     border: 1px solid #fff;
     color: white;
     padding: 12px 20px;
     border-radius: 4px;
     cursor: pointer;
     font-family: unset;
}
 #showModal:hover {
     background-color: rgb(53, 53, 53);
}
 #diap {
     color: white;
     font-family: unset;
}
 #modal {
     border: 1px solid #fff;
     background-color: rgb(43, 43, 43);
     border-radius: 5px;
     width: 50%;
     height: fit-content;
}
 #okbutton {
     display: grid;
     position: relative;
     background-color: rgb(83, 83, 83);
     border: 1px solid #fff;
     color: white;
     padding: 5px 50px;
     border-radius: 4px;
     cursor: pointer;
     text-decoration: none;
     font-family: unset;
     justify-self: center;
     justify-content: center;
}
 .kontakt {
     margin-top: 50px;
     border-radius: 5px;
     background-color: rgb(43, 43, 43);
     padding: 20px;
}
 input:focus {
     outline: none;
}
 textarea:focus {
     outline: none;
}
/* ---------/Kontakt/--------- */
/* ---------Footer---------- */
 body #footer {
     border: 1px solid rgb(207, 102, 102);
     margin-top: 20px;
     position: relative;
}
 body footer {
     display: flex;
     flex-direction: row;
     background-color: rgb(32, 32, 32);
    /* border: 1px solid rgb(114, 66, 66);
     */
     width: 100%;
     height: 50px;
     align-content: center;
     padding: 5px 0px;
}
 footer a, p {
     text-decoration: none;
     align-self: center;
     margin: 20px;
     color: white;
}
 footer a:hover {
     color: rgb(116, 114, 114);
}
/* -------/Footer/------- */
<!DOCTYPE html>
<html lang="sv">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>Hem - Vi i Universum</title>
      <link rel="stylesheet" href="1.css" />
      <link
         href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300&display=swap"
         rel="stylesheet"
         />
   </head>
   <body id="abody">
      <!-- Alla -->
      <div class="hotbar">
         <div class="logo">
            <a class="hem" href="https://gb7v56.csb.app/Sidor/1/1.html">
            <img src="../../Bilder/Logo.png" alt=""
               /></a>
         </div>
         <a id="a" href="https://gb7v56.csb.app/Sidor/1/2.html">Vår Galax</a>
         <a id="b" href="https://gb7v56.csb.app/Sidor/1/3.html">Vårt Solsystem</a>
         <a id="c" href="https://gb7v56.csb.app/Sidor/1/4.html">Vår Planet</a>
         <a id="d" href="https://gb7v56.csb.app/Sidor/1/5.html">Forskning</a>
      </div>
      <!-- Alla -->
      <!-- Ind -->
      <div id="adiv">
         <div class="headimg">
            <h1>Vi i Universum</h1>
         </div>
         <div id="adivtxt">
            <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos
               voluptatem dolorum non exercitationem molestiae voluptas eius! Cum
               expedita in repellat labore saepe, odit eos nihil rerum assumenda
               dolorum praesentium tenetur quidem facilis dolorem recusandae
               voluptates iure aliquid magnam quas suscipit eaque alias nisi? Magnam
               officiis deserunt natus, quisquam quae accusantium.
            </p>
            <p>
               Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa
               explicabo porro est, corporis debitis possimus vero fugit minus,
               quisquam consequatur eos molestias. Doloribus reiciendis culpa quam,
               quod numquam itaque eos accusamus nam accusantium, quaerat, enim quos
               deleniti sit voluptatibus voluptatem. Culpa aut porro ullam aliquid
               fugiat nam corrupti!
            </p>
         </div>
      </div>
      <!-- Ind -->
      <!-- Footer -->
      <div id="footer">
         <footer>
            <p>© Linkvard & Co 2023</p>
            <a href="https://gb7v56.csb.app/Sidor/Footer/Kontakt.html">Kontakt</a>
            <a href="">Om Oss</a>
         </footer>
      </div>
   </body>
</html>
com.on.ist
  • 177
  • 1
  • 10
  • Thanks for the response but i dont want the footer to be fixed, I just want it to be at the bottom of the site. Under all the content. Sorry for being unclear it's my first time posting here. – Linus Hultin May 07 '23 at 00:37
  • No problem! I updated the answer and the code. – com.on.ist May 07 '23 at 00:54