Align a button to the bottom of the div using CSS (I have already equalized the columns)

Question

I have three columns (single row) that contains text and a centered button at the bottom. Based on the visitors viewport, sometimes the text ends up making one of the columns longer (vertically) than the other, causing the buttons at the bottom to not line up.

To solve this, I set "equalize columns" on (within the Divi theme) and based on the temporary red background I added to the columns, they seem to be the same height. However, the two buttons on the left, despite being inside a column that is the same height as the biggest one (on the right), are not floating to the bottom of the div. Here is a screenshot:

Here is the button code that I use in each div:

<div class="homepage-blurb-buttons-div1"><div class="homepage-blurb-buttons-div2">[maxbutton id="1" text="FREE SITE AUDIT" url="https://www.example.com/examplepage"]</div></div>

And here is the CSS for them (was mainly for simply centering them):

.homepage-blurb-buttons-div1 {  text-align:center; margin-top:25px; }
.homepage-blurb-buttons-div2 { display:inline-block; }

I have tried to set the parent (div1) to "position: relative;" and the child (div2) to "position: absolute; bottom: 0;" as recommended elsewhere but this is what happens:

All I want to achieve is to push the button div to the bottom of the already equalized columns. In my screenshotted examples, that would mean pushing the "Free Site Audit" and "Free Analysis" to the bottom.

NOTE: Both the divs and the button doesn't have any bottom margins or padding.

UPDATE: I have just noticed that although the columns are being equalized, it is not adjusting the overall parent div. So in other words, the buttons are being aligned as low as they can go, so what I really need is some CSS to force the two DIVs on the left to take up all available space?

I have added the HTML/CSS relating to the buttons, is that what you are looking for? — Sgtmullet
– Sgtmullet, Commented Sep 21, 2017 at 7:32
Have you figured this one out yet, and is my answer good enough to be accepted? — Asons
– Asons, Commented Oct 1, 2017 at 7:51

Asons · Accepted Answer · 2017-09-21 08:49:23Z

5

I suggest you use Flexbox.

The below pseudo code shows when one use margin-top: auto in a flex column direction, it push the element towards the bottom of its parent.

.outer .inner {
  display: flex;
  flex-direction: column;            /*  stack items vertically  */
}
.outer .inner .button {
  margin-top: auto;                  /*  push button to bottom  */
}


/* styling for this demo only  */
.outer {
  display: flex;
}
.outer .inner {
  width: 33.333%;
  padding: 5px;
  border: 1px dotted red;
}
.outer .inner .header,
.outer .inner .text {
  padding: 10px;
}
.outer .inner .button {
  border: 1px solid gray;
  text-align: center;
}

<div class="outer">
  <div class="inner">
    <div class="header">Header</div>
    <div class="text">Some text</div>
    <div class="button">Button</div>
  </div>
  <div class="inner">
    <div class="header">Header</div>
    <div class="text">Some text, where it can be very very very very very very very very very very very very very very very very very very very very long</div>
    <div class="button">Button</div>
  </div>
  <div class="inner">
    <div class="header">Header</div>
    <div class="text">Some text that is middle middle middle middle long</div>
    <div class="button">Button</div>
  </div>
</div>

edited Sep 21, 2017 at 8:49

answered Sep 21, 2017 at 7:58

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sgtmullet Over a year ago

Thanks for the assist! It cant seem to get it working, but have added my site to the OP, please can you take a look for me?

Asons Over a year ago

@Sgtmullet Updated my sample so it matches your markup and classes

Sgtmullet Over a year ago

It doesn't seem to push the buttons down, please check this screenshot - imgur.com/a/QIKgm - Please also do me a favor and change that text in your code snippet to "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a augue blandit, ultricies enim a, volutpat turpis. Phasellus fringilla diam mauris, sed sodales urna gravida eu", as the main reason i didn't share the URL was that it hasn't been indexed by Google yet. :)

Asons Over a year ago

@Sgtmullet I rolled back my sample code to show the principals of using Flexbox, so you can implement it on your own code. If you want an update of a specific code, edit your question and add a minimal working code snippet from the site's code. When a linked resources die or change, this post will have little to none value for future users, hence we want the code within the question itself.

Sgtmullet Over a year ago

that makes sense, I appreciate it. Let me learn a bit and hack away until I figure this out, then will update this post. Thanks for your time, I really appreciate it.

|

Super User · Accepted Answer · 2017-09-21 07:44:06Z

You can do this using position. Check snippet below..

.parentDiv {
    display: inline-block;
    position: relative;
    width: 30%;
    vertical-align: top; 
    background: green;
    padding-bottom: 30px;
    min-height: 280px;
}
.btnDiv {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    border-radius: 3px;
    background: red;
    color: #fff;
}

<div class="parentDiv">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
<div class="btnDiv">Button</div>
</div>
<div class="parentDiv">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, s
<div class="btnDiv">Button</div>
</div>
<div class="parentDiv">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
<div class="btnDiv">Button</div>
</div>

Thanks for the code, can't seem to get it working though. I have added my site to the OP, please take a look?

Black Phantom · Accepted Answer · 2017-09-21 07:58:26Z

1

You can use flexible items for solving this problem.

On the div that wraps around each of your red boxes and is one level above your div1 just add a flex-direction. Here it sets the direction of flexible items to vertical:

flex-direction: column

On your div1 you can use this, which will move the div to the end of the flexible items column:

justify-content: flex-end;
display: flex;

For more info:

answered Sep 21, 2017 at 7:58

Black Phantom

2572 silver badges10 bronze badges

1 Comment

Sgtmullet Over a year ago

Thanks for the help! I have tried this but it doesn't seem to work. I have added my website in the OP, please check it out it.

Collectives™ on Stack Overflow

Align a button to the bottom of the div using CSS (I have already equalized the columns)

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related