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

Html – How to position a button consistently within a group of similar divs in a row?

The issue I’m encountering pertains to the consistent positioning of a button within a collection of similar elements in a row. Here’s a breakdown of the problem:

  1. HTML Structure:
    I have a row containing several elements, each of which contains its unique content. This content comprises an SVG icon, a title, a description, and a "VIEW DETAILS" button.

  2. Button Overflow:
    The challenge I’m facing is that the "VIEW DETAILS" button sometimes overflows its parent , disrupting the intended layout.

  3. Desired Outcome:
    My objective is to have the "VIEW DETAILS" button consistently positioned within each . I want to ensure that the button’s placement remains identical for every within the row, irrespective of the content inside each .

` 

      <div class="col-lg-4 col-md-6 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="100">
        <div class="icon-box iconbox-blue">
          <div class="icon">
            <svg width="100" height="100" viewbox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
              <path stroke="none" stroke-width="0" fill="#f5f5f5"
                d="M300,521.0016835830174C376.1290562159157,517.8887921683347,466.0731472004068,529.7835943286574,510.70327084640275,468.03025145048787C554.3714126377745,407.6079735673963,508.03601936045806,328.9844924480964,491.2728898941984,256.3432110539036C474.5976632858925,184.082847569629,479.9380746630129,96.60480741107993,416.23090153303,58.64404602377083C348.86323505073057,18.502131276798302,261.93793281208167,40.57373210992963,193.5410806939664,78.93577620505333C130.42746243093433,114.334589627462,98.30271207620316,179.96522072025542,76.75703585869454,249.04625023123273C51.97151888228291,328.5150500222984,13.704378332031375,421.85034740162234,66.52175969318436,486.19268352777647C119.04800174914682,550.1803526380478,217.28368757567262,524.383925680826,300,521.0016835830174">
              </path>
            </svg>
            <i class="bx bx-check-shield"></i>
          </div>
          <h4><a href="">Test Text Heading</a></h4>
          <p>test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text </p>
          <a href="#"><button class="button-33" style="margin-top: 40px; width: 100%;">VIEW DETAILS</button></a>
        </div>
      </div>

`

What I’ve Tried:

I have attempted several solutions to address the issue, but none of them have provided the desired result. Specifically, I have tried:

Using CSS positioning properties (position: absolute, bottom, right) to control the button’s placement within each <div>.
Adjusting the width, height, and max-width properties of the parent container (.icon-box) and the button to ensure proper sizing and containment.
Inspecting the elements using browser developer tools to identify any conflicting styles or unexpected margin/padding.
Despite these efforts, the button still overflows the parent <div> in some instances, which is not the intended behavior.

Expectations:

I expected that by using the CSS positioning properties and adjusting the sizes and properties of the button and container, I would be able to consistently position the "VIEW DETAILS" button within each <div> without it overflowing. The desired outcome is to ensure that the button’s position remains the same for every <div> within the row, regardless of the content within the <div>.

I’m looking for guidance on the correct CSS adjustments or potential issues that might be causing this behavior. Any insights or suggestions would be greatly appreciated.

Tags:

2

Answers


  1. 0

    There are a few missing infos to be able to answer your question with complete certainty, but based on the following assumptions:

    • You want to place the button consistently in divs whose content may vary in length
    • the classes attached to your elements are self-explanatory based on their names

    Here’s how I would proceed:

    <style>
.row-element {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}
.card-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.card-item__button {
  margin-top: auto;
}
</style>
<div class="row-element">
  <div class="card-item col-lg-4 col-md-6 d-flex align-items-stretch">
    <div class="icon-box iconbox-blue">
      <div class="icon">
        <svg width="100" height="100" viewbox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">{…}
        </svg>
        <i class="bx bx-check-shield"></i>
      </div>
      <a href=""><h4>Test Text Heading</h4></a>
      <p>test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text </p>
      <a class="card-item__button" href="#">VIEW DETAILS</a>
    </div>
  </div>

  {sibling card items here}

</div>

    Notes:

    1. You can’t use a button inside an <a> element. Choose one of the two (if it’s a link to another page, keep the <a>. if it’s an action on the same page, keep the <button>)
    2. It’s better practice to nest your headings inside a link, than the other way around (<a><h4>{…}</h4></a>, not <h4><a>{…}</a></h4>)

    The way it works is the following:

    • the div with class="row-element" is a flex container that forces its children to grow in height to match the tallest one among them (align-items: stretch)
    • the divs with the class="card-item" are children of that row-element parent. They also are flex containers, with a flex direction of column. Their children will be placed at the top (justify-content: flex-start) , but the button has a margin-top: auto declaration, which will push it to the bottom of the card, achieving the desired effect.
    Login or Signup to reply.
  2. 0

    Certainly! To position a button consistently within a group of similar divs in a row, you can use CSS Flexbox. Here’s how you can do it:

    HTML:
<div class="container">
  <div class="item">
    <!-- Content of div 1 -->
  </div>
  <div class="item">
    <!-- Content of div 2 -->
  </div>
  <div class="item">
    <!-- Content of div 3 -->
  </div>
  <button class="button">Button</button>
</div>

    CSS (either in a separate CSS file or within a tag in your HTML):

      .container {
      display: flex;
      align-items: center; /* Center vertically */
      justify-content: space-between; /* Distribute items evenly horizontally */
    }
    
    .item {
      /* CSS styles for individual divs can go here */
    }
    
    .button {
      /* CSS styles for the button can go here */
    }

    In the example above, the parent container with the class "container" holds the child divs and the button. By using display: flex; and justify-content: space-between;, the child divs will be evenly spaced horizontally, and the button will be centered between the divs.

    You can customize the styles of the individual divs and the button by adding CSS rules for the "item" and "button" classes as needed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search