Css column height equal

Same Columns Height

Yeah I know, I can do it with min-height , or perhaps a table -layout… It’s what you think, but you are not totally right if you do so. But before talking about right and wrong, let’s define our needs.

Defining the columns behavior

I worked with several designers. You know them, they want to create perfect blocks with right divisions, well measured columns, buttons to the bottom, gorgeous images or icons to illustrate a marketing wording…
Let’s define our needs as following:

• Columns should have same visual height by taking the biggest one,
• Columns could have same width, but can also be flexible,
• I want an image at the top, then a title, then a little text and a button/link
• The link have to be at the bottom-end of the column, no matter the text size above,
• Use a minimal markup and CSS, only CSS, no JS

Let’s code this

First at all, you need to build a basic HTML markup. I propose to you this one, but feel free to adapt or improve regarding your real needs.

HTML

 
Same Column Height
 
 
 
A little title
 
Lorem ipsum dolor sit […] Read more 
 
 
A little title
 
Lorem ipsum dolor sit amet […] Read more 
 
 
A little title
 
Lorem ipsum dolor sit amet, consectetur […] Read more 
 
 

Now some styles to make the magic works.

CSS

To be clear: today, your website has to be responsive. That’s why the CSS code I’ll propose you is mobile first responsive.

/** * Make images responsive */ .flex .col img < width: 100%; height: auto; >/** * Make .flex children same * height using display flex. * Justify property prepares * cols for being centered. */ .flex < display: flex; justify-content: center; width: 960px; max-width: 100%; margin: auto; >/** * Make cols flexible to * auto push button at the * col bottom. */ .flex .col < display: flex; flex-direction: column; flex: 1 1 300px; /* In the order, equal to flex-grow: 1; flex-shrink: 1; flex-basis: 300px; */ margin: 1em; >/** * Margin-top auto pushes * button to bottom. * Align self makes button * stuck to the left. */ .flex .col .btn < align-self: flex-start; margin-top: auto; >/** * Under 900px wrap cols */ @media (max-width: 900px) < .flex < flex-wrap: wrap; >>

In that precise case, I allowed images to be very big, larger than their physical width in intermediate screen sizes. (iPad mini in portrait, or something…)
If you need to keep a real good feeling about images, grab a solution among size and srcset attributes, or simply decide to replace flex: 1 1 300px; by flex: 0 1 300px; that allows cols being smaller but not bigger than 300 pixels wide.

I hope these comments will help you understand this very short code.Yeah, as you can see, it’s pretty easy to do it work.

Sure, there are many other ways to make the same thing differently. Feel free to adapt it and make your own code.

You enjoyed this content?

Spread the word by sharing it.

Crafted by hands with love by Geoffrey Crofte
Cute Ninja illustration by Stéphanie Walter

Источник

Fixing the Equal Height Columns Problem (CSS)

The equal height columns problem (or anti-pattern) is where we have 2-3 three columns in one row. Each column has a different amount of content. So, the bottom of the columns don’t line up evenly. Ideally on a larger display, we want to have each column be the same height. And, we want to have buttons or links at bottom of each column be lined-up at the same level/height across the columns. Here’s the anti-pattern we are getting now. The equal height challenge is not specific to just one WordPress theme. But, I’ll be using the Avada WordPress theme (no affiliation) for the code examples. More importantly, if you can master this common web design pattern here, you’ll be able to handle it like a pro in other themes (or static sites).

Goals [#]

1. We would love to have the content boxes be equal height.
2. Say we have three columns with text and a CTA button in each column. The three CTA buttons will hug the bottom of the text block elements (not the bottom of the equal height columns). This means, the positioning of these buttons are at different heights. I.e, not what we want. Instead, We want them to all line up evenly across the bottom.
3. We don’t want to be forced to always use the exact amount of text for our content boxes like the Avada demos do. The Avada ThemeFusion demos give the illusion of equal height content boxes in a row. They do this by ensuring all the text in their content boxes have the same amount of characters.

Above: The Equal Heights Illusion — Avada Theme Demos Using Equal Text to Simulate Equal Heights

Our solution should look something like this.

Side by Side Before/After

Note: Please log in to your CodePen account to view if the pen doesn’t show up at first.

Our First Two Attempts [#]

If we didn’t know anything about the equal height columns anti-pattern, we naively would try these two approaches:

First Try — One Row and One Column of Content Boxes

1. Create one row with one column.
2. Inside the one column, add a Content Boxes Element.
3. Create three items inside the Content Boxes Element.

Above: One Wide Column (yellow) with One Content Boxes Element that has Three Items (green)

Second Try — One Row with Three Columns with One Content Box Each

1. Create one row.
2. Enable the Set Columns to Equal Height setting for the row.
3. Create three columns (1/3 width each).
4. In each 1/3 column, create one Content Boxes Element.
5. Create one item in each of the Content Boxes Element.

Above: Three Columns (yellow) with Three Content Boxes (green)

As you’ve probably have noticed, neither approach works.

Solution [#]

What’s the solution? One solution involves using the First Try method (above) and writing custom CSS to:

1. Perform a media query (responsive design).
2. Set a fixed height for the content boxes.
3. Push the buttons down to the bottom using absolute positioning.

I know you are wondering. How many lines of code will this cost me? Six!

/* Only do this fancy stuff for devices larger than a tablet. */ @media only screen and (min-width: 1025px)  .content-container  min-height: 500px; /* Change this to what you need. */ > /* Ground the CTA button. */ .fusion-button-wrapper  position: absolute; bottom: 5px; > > 

Instructions

1. Add this CSS code to your Custom CSS code editor for the page that has your content boxes.
2. Adjust the min-height value to what works for you.
3. Click Update to save the page.
4. Reload the page (clear caches if needed) to view the changes.

Recap of the Code

OK. Here’s what this CSS is doing.

1. A media query to force equal heights only for larger devices. For anything smaller than 1025px , the design becomes responsive by stacking the content boxes.
2. A min-height property for the content boxes to ensure each box has the same height inside their parent containers.
3. Absolute positioning on the button components to force them to the bottom of their container columns.

Flex Version [#]

What’s that you say? Where’s the CSS3 flexbox version?!

/* Only do this fancy stuff for devices larger than a tablet. */ @media only screen and (min-width: 1025px)  .content-container  display: flex; flex-flow: column; flex: 1 200px; min-height: 450px; /* Change this to what you need. */ > /* Need to force the width for the paragraph for some reason. */ .content-container p  min-width: 300px !important; > /* Ground the CTA button. */ .fusion-button-wrapper  flex: 1 100px; display: flex; align-items: flex-end; /* Ground the button . */ justify-content: left; /* left | center | right */ > > 

Vanilla Flexbox Example on CodePen

This solution is more elegant than the Avada one above. Instead of worrying so much about the button, I use flex: 1 for the middle content section. With that 1-line of CSS, the positioning of the button towards the bottom comes for free.

flex: 1 is shorthand for flex-grow of a factor of 1. I.e., take up all the remaining space by 1 factor.

Thanks to Angus for sharing this technique with me! 🙂

Note: Please log in to your CodePen account to view if the pen doesn’t show up at first.

Recognise the Anti-pattern [#]

I’ve seen the equal height columns issue come up enough times—hence this post. Learn to recognise the anti-pattern. Then, you can be a rock star by applying the design patterns I’ve shared above.

Источник