0

I am trying to make a listing website. I am using the Jekyll Moonwalk theme as a base and heavily adapting it to my needs.

This is my first website project, so I am figuring it out as I go. Right now, I am trying to make my HTML button elements "pin" to the bottom of their container, instead of being at the bottom of the text, so they all are in line. Right now it looks like this:

Image

The red line is roughly where I want the bottom of all the buttons to me.

I have tried ChatGPT's suggestion, but it didn't work.

<div style="position: relative;">
  <button style="position: absolute; bottom: 0;">Click Me</button>
</div>
Darkblade
  • 21
  • 5

2 Answers2

1

You can use display flex for the boxes to arrange them like this, justify the content using space-between will always keep the buttons at the end.

here box is your card

.box{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 280px;
height: 320px;
border: 1px solid #000000;
}
<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor egestas sem. 
</p>
</div>
<div class"bottom">
<!--button-->
<button> Tell me more</button>
</div>
</div>
Nizal Sha
  • 94
  • 9
  • I have tried to add your suggestion into the HTML and CSS, but nothing has changed except for the fact that the buttons are now in a div called bottom. I am trying to send CSS and HTML snippets, but they are too long for the comments. I am sorry that I am not very good at this, I am learning as I go – Darkblade Feb 04 '23 at 04:39
  • Can you give a screenshot or something of your output? – Nizal Sha Feb 09 '23 at 04:43
0

style parent div of button position:relative syle button position: absolute; bottom:0

.container{
display:flex;
}

.box{
position:relative;
outline: 1px solid black;
height: 300px;
margin:5px;
padding:5px;
display:flex;
flex-direction: column;
align-items: center;
}

button{
position:absolute;
bottom: 10px
}
<div class="container">
<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis 
libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor 
egestas sem. 
</p>
</div>
<div class"bottom">

<!--button-->

<button> Tell me more</button>
</div>
</div>
<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis 
libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor 
egestas sem. 
</p>
</div>


<!--button-->

<button> Tell me more</button>
</div>
</div>
0MUHAMMEDIRFAN
  • 66
  • 8