How to place a div always appears adjacent to the footer according to footer height

Question

How can I place the red div always adjacent to the footer even footer height changes?

The bottom position calculation I mean. This is not about sticky footer or positioning footer. Also, the red div must be outside of the footer div like I have given in markup.

Example -

Thanks!

.footer {
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 0;
  background: grey;
  z-index: 1;
}
.main {
  position: relative;
  height: 100vh;
  width: 100vw;
}

.icon {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

<div class="main">
  <div class="icon"></div>
  <div class="footer">Footer</div>
</div>

None of the above questions is relevant to my question. @TylerH could you please explain how you marked this duplicate? Did you read my question even? It's not about positioning footer. — Max, Oct 10 '19 at 13:55
Contrarily, each of the duplicate targets above help to answer your question either in part or in full. Be sure to read all the answers under each one, not just the question and/or top/accepted answer. There are probably another hundred or so posts here that could apply as well, but we are limited to 5. When searching for a solution in Google, for example, it helps to add `site:stackoverflow.com` on the end to return only results here... that works much better than searching using Stack Overflow's built-in search (which is horribad). — TylerH, Oct 10 '19 at 14:48
I have gone through all the questions you tagged. Like I said it's not relevant. Pls, understand the question before mark it duplicates. — Max, Oct 10 '19 at 14:51

score 0 · Answer 1 · answered Oct 10 '19 at 13:12

One way would be to place the .icon within the .footer and set it's left-margin and top-margin to be negative half of the width/height respectively. You can also make it circular by adding border-radius: 50%.

.footer {
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 0;
  background: grey;
  z-index: 1;
}
.footer .icon {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  margin: -25px 0 0 -25px;
  left: 50%;
  z-index: 2;
  border-radius: 50%;
}

.main {
  position: relative;
  height: 100vh;
  width: 100vw;
}

<div class="main">  
  <p>Lorm ipsum dolor sit amet</p>
  
  <div class="footer">
    <div class="icon"></div>
    Footer
  </div>
</div>

score 0 · Answer 2 · answered Oct 10 '19 at 13:13

0

You can try below: Put icon div inside footer div and add margin-top:-25 (half of the height of icon) to the icon and add border-radius: 50%; to make div as circle

.footer {
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 0;
  background: grey;
  z-index: 1;
}
.main {
  position: relative;
  height: 100vh;
  width: 100vw;
}

.icon {
  margin-top: -25px;
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  border-radius: 50%;
}

<div class="main">
  <div class="footer"><div class="icon"></div>Footer</div>
</div>

answered Oct 10 '19 at 13:13

Bhushan Kawadkar

28,279
5
35
57

No, can't put the red div inside the footer. It needs to be positioned according to footer height even on responsive. – Max Oct 10 '19 at 13:15
Does it mean you cannot edit html as it is not under your control or there is another reason? If you cannot make changes in html then you can use jquery to put it inside footer or you need to calculate height of the footer always and then calculate footer's bottom margin – Bhushan Kawadkar Oct 10 '19 at 13:21
no I mean the red div shouldn't be inside footer – Max Oct 10 '19 at 13:51

score 0 · Answer 3 · answered Oct 10 '19 at 13:16

Place the icon div in the footer, and set the top to 0;

Also, I modified the translate rule slightly so that the div would be centered horizontally as well as vertically. Also added border-radius: 50% to make the icon round.

.footer {
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 0;
  background: grey;
  z-index: 1;
}
.main {
  position: relative;
  height: 100vh;
  width: 100vw;
}

.icon {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
  border-radius: 50%;
}

<div class="main">
  
  <div class="footer">
    <div class="icon"></div>
    Footer
  </div>
</div>

How to place a div always appears adjacent to the footer according to footer height

3 Answers3