I can't put this div in the website bottom

Question

I'm with a problem that i trying solve: i'm making a website, and i was going put the final part of the site, using a div, but this part can't stay glued in the bottom, no matters the code editing that i make follow my site code below:

@font-face {
  font-family: Open-Sauce-One;
  src: url("OpenSauceOne-Bold.ttf") format("truetype");
}

@font-face {
  font-family: Archivo-Black;
  src: url("ArchivoBlack-Regular.ttf") format("truetype");
}

body {
  display: flex;
  background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(153, 153, 153));
  height: 100vh;
}

div.Idrv2v {
  position: relative;
  left: 5%;
  bottom: 15px;
  width: 250px;
}

div.Edrv1v {
  position: absolute;
  background-color: #B4ADAD;
  max-width: 100%;
  width: 1366px;
  height: 95px;
  padding: 1px;
  top: 0px;
  left: 0px;
  right: 0px;
}

#titlelogo {
  font-family: Open-Sauce-One, "Comic Sans MS", sans-serif;
  font-size: 35px;
  color: #301111;
}

#subtitlelogo {
  font-family: Archivo-Black, "Arial Black", sans-serif;
  font-size: 18px;
  position: relative;
  bottom: 28px;
  color: #302e2e;
}

.svgmenu_dev {
  background-color: gray;
  width: 1366px;
  max-width: 100%;
  position: absolute;
  height: 90px;
  bottom: 0;
  right: 0px;
  left: 0px
}

.svgmenu_dev #svgmenudev1 #svgmenudev2 {
  font-family: Open-Sauce-One, "Comic Sans MS", sans-serif;
  font-size: 10px;
  position: absolute;
}

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <title>CoinCot</title>
  <link href="css-data/styles.css" rel="stylesheet">
  <meta name=viewport content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="Edrv1v">
    <div class="Idrv2v">
      <h1 id="titlelogo"> CoinCot.com </h1>
      <h2 id="subtitlelogo">A simple and efficient quotes website.</h2>
    </div>
  </div>
  <div class="svgmenu_dev">
    <a href="https://iconscout.com/icons/menu" target="_blank" id="svgmenudev1">Menu Icon</a> by <a href="https://iconscout.com/contributors/rengised" target="_blank" id="svgmenudev2">Alex Martynov</a>
  </div>
</body>

</html>

I wait can solve this

I tryed change the position of the div, set the position as absolute, but not works, i too set the position as relative, it got worse, becuase that the div has sttoped on the top of page (and its need stays in bottom), i'm sets the values of bottom, left and right as 0 pixels, but nothing, continues hover the bottom part.

Hi there, welcome to SO! .svgmenu_dev needs to have position: fixed instead of position: absolute. And use at the top of your CSS * { box-sizing: border-box } to get rid of the horizontal scrollbar. Do some reading at MDN about those two properties: 'position' and 'box-sizing'. For some extra need to know knowledge read about 'the stacking context' on MDN. — Rene van der Lende
– Rene van der Lende, Commented Feb 1, 2023 at 23:21
yes, the answer of the guy worked, but i need that it stay in the button, not fixed, like this that usually appears in the majority websites "© Enterprise 2017 . Credits: SB (Slime boy) programmed the website, Jonh designed the website, another guy make another thing etc. Privacy Policy . Terms of Service" etc. like this :P — Slime ScienceBoy
– Slime ScienceBoy, Commented Feb 2, 2023 at 4:43

omar kamal · Accepted Answer · 2023-02-01 23:57:37Z

0

set "box-sizing: border-box" to " div.Edrv1v "

answered Feb 1, 2023 at 23:57

omar kamal

1

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

I can't put this div in the website bottom

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related