How to position a div at the bottom of it's parent container?

Question

I want to position the two divs shown here at the bottom of their parent div. I have tried specifying this property in CSS:

position: absolute;

But it ends up overlapping and the buttons get mangled as well as shown here. From what I understand absolute positioning would do this and my only choice would be to use JS.

This is what the html looks like:

<div id="box" class="box-192" style="border:1px solid #8c8c8c;padding:20px;">
  <h2>theLAO</h2>
  <div class="box-body">
    <p>A DOA supporting the Blockchain ecosystem.</p>
    <p>Twitter: <a href="https://twitter.com/TheLAOOfficial" onclick="javascript:window.open('https://twitter.com/TheLAOOfficial'); return false;">@TheLAOOfficial</a></p>
  </div>
  <div class="button-div">
    <a href="https://thelao.io" onclick="javascript:window.open('https://thelao.io/'); return false;"><span class="buttons">visit theLAO ↗</span></a>
    <a href="https://daodir.co/doa/thelao/"><span class="buttons">discuss theLAO </span></a>
  </div>
</div>

...and some relevant CSS

.button-div {
margin: 0 auto;
text-align: center;
bottom: 0;
padding-top: 25 px;
}

If you want to visit the site where this is happening, visit https://centinl.com

Flex is your friend `#box { display: flex; } .box-body { flex-grow: 1; }` , no need for absolute position. — kemicofa ghost, Oct 26 '21 at 07:35
you can add padding to the bottom of each box of the height of your button container. — Zain, Oct 26 '21 at 07:36
.box-192{ position:relative; } .button-div { margin: 0 auto; text-align: center; bottom: 0; padding-top: 25 px; position:absolute; } — Haneef Ansari, Oct 26 '21 at 07:37
consider reading all the answers in the duplicate (I insist on *all*) — Temani Afif, Oct 26 '21 at 09:35

score 1 · Answer 1 · answered Oct 26 '21 at 07:40

Set your container to display: flex; and set the middle element with a flex-grow to 1 so it pushes its sibling elements to their extremities. There is no need to use position: absolute;.

#box {
  display: flex;
  flex-direction: column;
  height: 500px;
}

.box-body {
  flex-grow: 1;
}

<div id="box" class="box-192" style="border:1px solid #8c8c8c;padding:20px;">
  <h2>theLAO</h2>
  <div class="box-body">
    <p>A DOA supporting the Blockchain ecosystem.</p>
    <p>Twitter: <a href="https://twitter.com/TheLAOOfficial" onclick="javascript:window.open('https://twitter.com/TheLAOOfficial'); return false;">@TheLAOOfficial</a></p>
  </div>
  <div class="button-div">
    <a href="https://thelao.io" onclick="javascript:window.open('https://thelao.io/'); return false;"><span class="buttons">visit theLAO ↗</span></a>
    <a href="https://daodir.co/doa/thelao/"><span class="buttons">discuss theLAO </span></a>
  </div>
</div>

Don't hesitate to mark this answer as the correct one thanks. — kemicofa ghost, Oct 27 '21 at 14:07

How to position a div at the bottom of it's parent container?

1 Answers1