Aligning buttons in boxes

Design help General
1

At the risk of sounding like a numpty…

I have 4 columns, each with a div which contains a title and copy in each and I want to put buttons below the text all horizontally aligned with each other. Can one of you geniuses tell me how to do this please?

2

Do you mean like this?

795×209 9.43 KB

Also, could you provide a share link so that i can look at your project?

Thanks!

3

Yes, but with a text above the buttons. https://preview.webflow.com/preview/muddle-fixed?preview=293cba681bbc7d27e8381c804b1fae28 (The Courses page)

4

This is a bit complex.

You will want to remove the set height from the course div you have wrapping the content and the buttons. Give the div a min height large enough to fit the longest content you have. Then set that div to relative.

Select the button div you have wrapping the buttons. Set it to absolute and select its position to be the bottom of its parent.

:smile:

1 Like
5

Much appreciated Alex, that worked perfectly. After 6 months of working with Webflow (and loving it), I’m still trying to get my head round the difference between relative, absolute and fixed. :slight_smile: I shall have to watch a video one day!

6

Dang, no that didn’t work - it looks all wrong on laptops and tablets, looks like I’ll have to go back to unaligned buttons.

7

I do this often by using a little flexbox in the custom code.

Main idea:

  1. Flexbox allows children to fill the height of its parent. So all the columns will dynamically be the same height.
  2. Then do @AlexN’s trick of setting the column to position: relativeand the button to position: absolute

Here’s how I do it.

  1. I give my row a class name. Maybe .flex-row

  2. Dashboard > Custom Code > Header Code

  3. Wrap this code in <style></style> tags
    .flex-row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    }

  4. Make sure your columns have no set height.

  5. You won’t see anything in the Designer - you have to publish the site to see the effects of flexbox.

  6. Back in the design editor, give the columns position: relative

  7. Give your button wrapper position: absolute and set it at the bottom.

This should force all columns to be the same height, and align the buttons at the bottom.

I think.

2 Likes
8

Oh yes. You may need to use a media query so this only applies to the breakpoints you want. To do this, you wrap your CSS rule in a media query.

/* ---------------------------- */
/* MEDIA QUERY SAMPLES 
/* ---------------------------- */

@media screen and (min-width: 992px) { /* desktop only */ }
@media screen and (min-width: 768px) { /* tablet & above */ }
@media screen and (min-width: 480px) { /* horiz & above */ }
@media screen and (max-width: 991px) { /* tablet & below */ }
@media screen and (max-width: 767px) { /* horiz & below */ }
@media screen and (min-width: 768px) and (max-width: 991px) { /* tablet only */ }
@media screen and (min-width: 480px) and (max-width: 767px) {/* horiz only */ }
@media screen and (max-width: 479px) { /* phone only */ }

The CSS rule goes between the brackets.

1 Like
9

Thanks very much Sarah, I’ll give this a go.

10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.