Question 227296 in Html Question posted in
Some basic documentation can be found here.

Html – Button positioned at bottom of main div instead of inner Div

I have this Register button that needs to be positioned at the bottom of the card, but somehow using position absolute (bottom: 0) places it into the bottom of the main (first) div. Not sure what to do to place it at the bottom of the card:

    <STYle>
    .cardHorizontal {
      cursor: default;
      display:inline-block;
      transition: 0.3s;
      width: 40%;
      margin-right: 20px;
    }
    </STYle>
    <div style="height: 2000px; background-color: #F8F6F7;">
        <div style="margin-left: 20px;">
            <br><br>
            <!-- Card #1 -->
            <div class="cardHorizontal" style="width: 290px;">
              <a href="#" target="_blank">
              <img src="https://www.jquery-az.com/html/images/banana.jpg" style="width:50%; border-radius: 20px; margin: auto; display:block;">
              </a>
              <div class="container">
                <h3><b>Card Title</b></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum bibendum arcu quis molestie. Duis at pretium justo, at egestas leo. Quisque gravida, est sit amet blandit sagittis, lorem sem iaculis diam, nec facilisis mauris arcu quis orci. Etiam eget ullamcorper ipsum. Maecenas eu nulla ac quam aliquet bibendum vitae vitae est.</p>
                <p style="font-size: 16px"><b>Date: January 2050</b></p>
                <a href="#">Read More</a>
              </div>
              <button style="background-color: #6D925C; color: white; height: 50px; width: 150px; padding: 0; border: none;" type="button">Register</button>
            </div>
        </div>
    </div>

Any suggestion?

Thanks

Tags:

3

Answers


  1. 0

    This will position the button absolutely at the bottom of its parent element, which is the .cardHorizontal div.

    .cardHorizontal {
  cursor: default;
  display:inline-block;
  transition: 0.3s;
  width: 40%;
  margin-right: 20px;
}

.cardHorizontal .button {
  position: absolute;
  bottom: 0;
}
    Login or Signup to reply.
  2. 0

    Looks like the button is outside the card container, so the absolute position is not working as intended. You can try to wrap the button inside the container where the rest of the card’s content is, and then use the position properties to position it at the bottom.

    <style>
.cardHorizontal {
  cursor: default;
  display: inline-block;
  transition: 0.3s;
  width: 40%;
  margin-right: 20px;
  position: relative; /* Add relative positioning here */
}

.registerButton {
  background-color: #6D925C;
  color: white;
  height: 50px;
  width: 150px;
  padding: 0;
  border: none;
  position: absolute;
  bottom: 0;
}
</style>
<div style="height: 2000px; background-color: #F8F6F7;">
  <div style="margin-left: 20px;">
    <br><br>
    <!-- Card #1 -->
    <div class="cardHorizontal" style="width: 290px;">
      <a href="#" target="_blank">
      <img src="https://www.jquery-az.com/html/images/banana.jpg" style="width:50%; border-radius: 20px; margin: auto; display:block;">
      </a>
      <div class="container">
        <h3><b>Card Title</b></h3>
        <p>Lorem ipsum...</p>
        <p style="font-size: 16px"><b>Date: January 2050</b></p>
        <a href="#">Read More</a>
      </div>
      <button class="registerButton" type="button">Register</button> <!-- Use the class here -->
    </div>
  </div>
</div>

    Now, the registerButton class gives the button an absolute position at the bottom of the card. By adding position: relative; to the cardHorizontal class, the button will be positioned at the bottom of that card.

    Login or Signup to reply.
  3. 0 
    <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<style>
  .cardHorizontal {
    cursor: default;
    display: inline-block;
    transition: 0.3s;
    width: 40%;
    margin-right: 20px;
    position: relative; /* Add this line */
  }
  
  .container {
    flex: 1; /* Add this line */
  }
  
  .button-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0;
  }
</style>
<div style="height: 2000px; background-color: #F8F6F7;">
  <div style="margin-left: 20px;">
    <br><br>
    <!-- Card #1 -->
    <div class="cardHorizontal" style="width: 290px;">
      <a href="#" target="_blank">
        <img src="https://www.jquery-az.com/html/images/banana.jpg" style="width:50%; border-radius: 20px; margin: auto; display:block;">
      </a>
      <div class="container">
        <h3><b>Card Title</b></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum bibendum arcu quis molestie. Duis at pretium justo, at egestas leo. Quisque gravida, est sit amet blandit sagittis, lorem sem iaculis diam, nec facilisis mauris arcu quis orci. Etiam eget ullamcorper ipsum. Maecenas eu nulla ac quam aliquet bibendum vitae vitae est.</p>
        <p style="font-size: 16px"><b>Date: January 2050</b></p>
        <a href="#">Read More</a>
      </div>
      <div class="button-container">
        <button style="background-color: #6D925C; color: white; height: 50px; width: 150px; padding: 0; border: none;" type="button">Register</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search