Need help with a common column height problem

Design help General
1

Is there any way to make these equal heights without explicitly declaring the height in pixels? This must be a common problem, I just can’t think of what the solution would be in Webflow.

ScreenClip
ScreenClip1073×684 109 KB

2

In flex use the Align: Stretch vertically.

3

Oh I forgot to mention I wasn’t using Flex… I’ve just been trying out Webflow the past few days, and haven’t even tried the Flex features yet. Maybe that’s just what I should do! Is there any other best practice you know of when not using Flex to achieve the same affect? Originally, I was just going to style the column itself (instead of a DIV inside the column, which is what I’ve done here) but I couldn’t achieve the right padding I needed for the gutters between the columns. So, I’ve got these DIVs here, inside the columns, that of course don’t know to stretch to match the others when its own content isn’t long enough to push it out to that same height. If Flex is the best way to go for this, I’ll just likely switch over to that, but it would also be cool to know if there’s a best practice for when not using it, just in case.

4

Yeah you could use columns but remember anything you want to:

Size equally
Align together
Space evenly

Things like this are always going to need % percentages instead of pixels, as best case. Mainly due to responsiveness on other device sizes.

Taking this in mind, the percentage will need to know - The Percentage of What? In your case, the column is wrapped in something. That div or section wrapper needs a size declaration before %'s of child items can be set.

If you want to use Flex instead, use this layered structure:

  1. Section: Width 100%, Height 25vh, 50vh, 100vh, or Pixel size. Just know on responsiveness you’ll have to change the pixel size, and tweak all.

  2. Add Div Wrapper: Width & Height 100%

  3. Add Divs for content: You’ll need to test whether horizontal or vertical layout, etc. There’s options to look at. Here’s where Align: Stretch has an effect.

Hope this helps. Holler if you need anything else.

5

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