How do you pin elements to the bottom of a container in HTML and CSS?

css position bottom of div
css sticky footer
css position bottom of page
css bottom of div
position: sticky css
css stick to bottom of div
align div to bottom of parent without absolute
align div to bottom of page

I am trying to make a simple portfolio website and I want two tags at the bottom of the screen whenever I navigate down or up the page. So for example, if I am at the top of the page it says my name with three links, "About Me", "My Work", and "Contact". If I click on "About Me" it will navigate me down the page to where I have that section. Then this is where I need help, I want "My Work" and "Contact" at the bottom for easy navigation. I have been trying to figure this out for hours now which is why I am now asking a question on here. I am new to web programming so excuse me. Here is some of my code that is relevant.

#container {
  padding-top: 100vh;
  width: 100%;
  height: 100vh;
  color: white;
}

#container div {
  position: relative;
  width: 100%;
  height: 100%;
}


/* Styling for each indivual link (About Me, My Work, Contact) */
#container div#AboutMe {
  background: white;
  color: black;
  font-family: Helvetica;
  font-weight: lighter;
  text-align: center;
  font-size: 21px;
}

#AboutMe p { 
 padding-right: 60%;
 padding-left: 10%;
 padding-top: 5%;
}

.animatedButtonBody span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.animatedButtonBody span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.animatedButtonBody:hover span {
  padding-right: 25px;
}

.animatedButtonBody:hover span:after {
  opacity: 1;
  right: 0;
}
<div id="container">
  <div id="AboutMe">
    <h1>About Me</h1>
    <p>
     This is where some text will go.
    </p>
    <a href="#MyWork" class="animatedButtonBody"><span>My Work</span></a>
    <a href="#Contact" class="animatedButtonBody"><span>Contact</span></a>
  </div>
</div>

You can try position:fixed. Also you should tidy up your html elements (wrap things in div, etc.)

Example:

.nav {
  height: 60px;
  background-color: grey;
}

.content{
  height: 500px;
  background-color: lightgreen;
} 

.footer{
  height: 60px;
  width: 100%;
  background-color: black;
  position: fixed;
  bottom: 0px;
}
<div class = "container">
  <div class = "nav">
  </div>
  <div class="content"> 
  </div>
  <div class = "footer"> 
  </div>
</div>

CSS bottom Property, How do I position something at the bottom of a page in CSS? Here is a little CSS trick that allows you to align content to the bottom of its container, in a similar fashion to how vertical-align="bottom" works in table-based layouts. The trick is to set the position of the container to relative, and the position the of the child element to absolute. Then set the child’s bottom property to 0.


Not tested, but you can try it. You need an element with "position:fixed", this way it stays on the screen when scrolling.

 <style>
        .float-container {
            position: absolute;
            bottom: 0;
        }
        .about-me {
            position:fixed;
        }
    </style>    
    <div class="float-container>
        <div class="about-me">
            <p>Some Content</p>
        </div>
    </div>

How to position a div at the bottom of its container using CSS , This property has no effect on non-positioned elements. If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit​  The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements. If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor.


You should check out position:fixed and position:absolute.

Link to W3Schools: HERE

You didn't clarify what does "at the bottom" mean, therefore I give 2 examples. This is how I understood your question.

If you need buttons to be always in viewport at the bottom of the screen use this example with custom values. Here you have an example how to center an item at the bottom center of the viewport.

#example{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%)
}

How to align content of a div to the bottom using CSS, Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. The w3-container class adds a 16px left and right padding to any HTML element.


I figured out the answer to my problem. Here is what I added to my tags.

#pinButton1 {
    position: absolute;
    bottom: 0;
    transform:translateX(-100%)
}
#pinButton2 {
    position: absolute;
    bottom: 0;
    transform:translateX(0%)
}
<a href="#AboutMe" class="animatedButtonBody" id="pinButton1"><span>About Me</span></a>
			<a href="#Contact" class="animatedButtonBody" id="pinButton2"><span>Contact</span></a>

Aligning an element to the bottom of its container, How to position a div at the bottom of its container using CSS? The bottom property affects the vertical position of a positioned element. DOCTYPE html>. To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid. Grid containers consist of grid items, placed inside columns and rows. The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column.


Making Elements Stick in CSS Using position: sticky ← Alligator.io, Here is a little CSS trick that allows you to align content to the bottom of its container, in a similar fashion to how vertical-align="bottom" works in  If no containing elements have these position properties set on the page, then the child will be positioned relative to the page body. Let’s consider the following CSS positioning examples: 1. Child div positioned at bottom right of parent. The HTML and CSS for this is pretty simple.


How to keep your footer where it belongs ?, SVG · Electron · Flow · Jekyll · Sass · HTML · Web Components · Flutter · Polymer There's a new value in town for the CSS position property: sticky . that will be a flex container and then 4 additional div elements that will be the flex items. position: -webkit-sticky; position: sticky; bottom: 1rem; align-self: flex-end; }. When a page contains a large amount of content, the footer is pushed down off the viewport, and if you scroll down, the page ‘ends’ at the footer. However, if the page has small amount of content, the footer can sometimes ‘cling’ to the bottom of the content, floating halfway down the page, and leaving a blank space underneath.


Implementing a pin-to-bottom scrolling element with only CSS, A footer is the last element on the page. For a quick fix, you can absolutely position the footer at the bottom of the page. DOCTYPE html> <html> <head> <​link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> #page-​container { position: relative; min-height: 100vh; } #content-wrap  The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located. Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used: