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

Question

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>

Maybe a duplicate of https://stackoverflow.com/questions/18915550/fix-footer-to-bottom-of-page or https://stackoverflow.com/questions/13788357/css-for-fixed-footer — canpan14, Aug 08 '18 at 19:52
So if I click on the "About Me" hyperlink it will navigate me to the section where the "About Me" information is. Then I want two hyperlinks at the bottom of that section that say "My Work" and "Contact". So at the bottom of that specific section. — Felix Doe, Aug 08 '18 at 19:54
Advice for the future - please edit your code and include the minimum required to reproduce the problem. You don't really need anything like `cursor:pointer` in this question. It makes it easier to understand the problem. — Jakub Muda, Aug 08 '18 at 20:16

score 2 · Answer 1 · answered Aug 08 '18 at 20:09

2

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>

Hope it helps

answered Aug 08 '18 at 20:09

Joaquín Romero Franco

138
1
8

Also you could replace divs for better html tags (semantically) like
,
. Check them [here](https://www.w3schools.com/tags/default.asp)
– Joaquín Romero Franco Aug 08 '18 at 20:19

score 2 · Answer 2 · answered Aug 08 '18 at 20:30

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>

score 1 · Answer 3 · answered Aug 08 '18 at 19:54

1

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>

answered Aug 08 '18 at 19:54

Tim von Känel

301
2
12

I don't want it to stay on the screen when scrolling. I have three different sections on my one page, "About Me", "Contact", and "My Work". At the bottom of the "About Me" section there will be two hyperlinks for contact and my work. Then at the bottom of the "Contact" section there will be two hyperlinks for about me and my work and so on... – Felix Doe Aug 08 '18 at 19:56

Jakub Muda · Answer 4 · 2018-08-08T20:10:02.627

1

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%)
}

If you need an item to be at the bottom of the page use

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

edited Aug 08 '18 at 20:10

answered Aug 08 '18 at 19:55

Jakub Muda

6,008
10
37
56

I used position:absolute but it makes my two tags overlap for some reason. Do you have any idea on how to fix that? – Felix Doe Aug 08 '18 at 19:57
You should wrap it in a div tags and use position absolute on div tag. It will solve the problem. – Jakub Muda Aug 08 '18 at 20:00
I tried doing that but when I added the div tags it put the two hyperlinks back in the middle of the screen – Felix Doe Aug 08 '18 at 20:03

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

4 Answers4