Question posted in
The full documentation can be found here.

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

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:

enter image description here

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:

enter image description here

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?

enter image description here

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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:

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search