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
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>