Menu icon Foundation
Aligning buttons in different columns?

Hi all,

Is there a way to align buttons that are in different columns?

I have:

Screenshot1

And i would like to have:

Screenshot2

Any ideas?

Thanks! :)

alignbuttonsdifferentcolumns

Hi all,

Is there a way to align buttons that are in different columns?

I have:

Screenshot1

And i would like to have:

Screenshot2

Any ideas?

Thanks! :)

hector_sapien almost 5 years ago

My (simple) code
HTML
<div class="row">
<div class="small-12 medium-4 columns">
<p>Lorem ipsum dolor sit amet, quis ocurreret expetendis at eos, pro et alii soluta ornatus. Inermis adipiscing vis cu, ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. </p>
<a href="#" class="button small radius">Button 1</a>
</div>
<div class="small-12 medium-4 columns">
<p>Lorem ipsum dolor sit amet, quis ocurreret expetendis at eos, pro et alii soluta ornatus. Inermis adipiscing vis cu, ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. Eos antiopam iudicabit vituperata te, unum harum feugiat vel eu, ludus regione vivendum mea eu.</p>
<a href="#" class="button small radius">Button 2</a>
</div>
<div class="small-12 medium-4 columns">Ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. Eos antiopam iudicabit vituperata te, unum harum feugiat vel eu, ludus regione vivendum mea eu.</p>
<a href="#" class="button small radius">Button 3</a>
</div>
</div>

Rafi Benkual almost 5 years ago

The only way to do this is to use CSS. Give the containig div realtive positioning and the button gets absolute position

hector_sapien almost 5 years ago

Thx Rafi,

For some reason, adding relative positioning to the containing div didn't work.
And since the buttons got absolute positioning they were taken out of the flow and started overlapping the above paragraph.

I solved this by adding some bottom padding to the element above the buttons.

 <div class="row" data-equalizer>
      <div class="small-12 medium-4 columns panel" data-equalizer-watch>
      <div class="mybox">
        <p>Lorem ipsum dolor sit amet, quis ocurreret expetendis at eos, pro et alii soluta ornatus. Inermis adipiscing vis cu, ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. </p>
        <a href="#" class="button small radius">Button 1</a>
      </div>
      </div>
      <div class="small-12 medium-4 columns panel" data-equalizer-watch>
      <div class="mybox">
        <p>Lorem ipsum dolor sit amet, quis ocurreret expetendis at eos, pro et alii soluta ornatus. Inermis adipiscing vis cu, ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. Eos antiopam iudicabit vituperata te, unum harum feugiat vel eu, ludus regione vivendum mea eu.</p>
        <a href="#" class="button small radius">Button 2</a>
      </div>
      </div>
      <div class="small-12 medium-4 columns panel" data-equalizer-watch>
      <div class="mybox">
      <p>Ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. Eos antiopam iudicabit vituperata te, unum harum feugiat vel eu, ludus regione vivendum mea eu.</p>
        <a href="#" class="button small radius">Button 3</a>
      </div>
    </div>
    </div>
.mybox {
  background-color: lightblue;
}

p {
   padding-bottom: 2.5em;
}

.button {
  position: absolute;
  bottom: 0;
}