Streaming live at 10am (PST)

Uniform problem to height of DIV Block

Hi everyone, thanks for reading.
I’m happy to be here to brush up on skills in using Webflow as I’m learning it recently just a month.

Attached is my first newbie project and I 'm looking for help on a proper setting of the DIV Block which is Inline-Block with 2 others setting in parallel horizontally but subject to different Paragraph block height (i.e. it depends on length of paragraph) contained inside in it, the DIV Block height will then be varied accordingly, so as you can see the block on right is shorter. I think normally I can fix the paragraph’s height by giving a fixed px amount, but in consider of responsive web, will there be any better solution you are willing to give advice?

I appreciated your reading of my first query here and look forward to your advice kindly.

Share Link of my project

I suggest using flexbox as your layout builder most of the time.

Thanks dram your suggestion.
I’m trying and practicing it. The first workaround I did was to tidy them up by using flexbox and to fix a certain value to the height of the Paragraph box but still feel not very satisfied and finally I did make the words inside the Paragraph box to have identical lines each other’s. It might not be a very proper way to settle but it helps before I can be more familiar with Webflow.
Thanks again.

Flexbox columns can have the same height (the highest one from a row of columns). As a matter of fat this is their default behaviour.

Hi Dram, appreciate your follow up closely.
Unfortunately might be my bad, I did try for an hour but couldn’t find the right setting of Flexbox to make the same height worked. Thanks.

Please create the necessary structure using flexbox and I will try pointing out the settings to use for this to work.

Thanks Dram, I deleted others and remained below as the necessary structure for your easy reference and comment.

Share link is as below:
https://preview.webflow.com/preview/matts-fabulous-project-4d-cabb9b64a72b1?utm_medium=preview_link&utm_source=designer&utm_content=matts-fabulous-project-4d-cabb9b64a72b1&preview=5451ba39b320338433059d77d841983e&mode=preview

You are using columns in your layout not flexbox. What I suggest is to get rid of columns and just use flexbox.

1 Like

Hi @dram
I feel very happy that I finally get it done with your encouragement and further comment to use pure flexbox. I can’t imagine it can be that simple to make it. I gain from it now!
Thank you so much!!

And I further found the below useful link to guide me through step by step:
[Equal Height Layouts with Flexbox]

You might have a look and comment feel free:
https://preview.webflow.com/preview/matts-fabulous-project-4d-cabb9b64a72b1?utm_medium=preview_link&utm_source=designer&utm_content=matts-fabulous-project-4d-cabb9b64a72b1&preview=5451ba39b320338433059d77d841983e&mode=preview

1 Like

I am very proud of you figuring things out by yourself! Keep it up and you’ll become webflow expert in no time!

1 Like