Equal height columns regardless of content

Design help General
#1

Sorry, another question :smile:

Anybody knows a simple way of creating equal height columns? Regardless of content? So for example right column has a lot of text, and the left column only a small portion of text. However I want to show both columns with different background colours at the same height. Example: http://css-tricks.com/examples/FluidEqualHeightFauxColumns/

1 Like
#2

By the way, a simple fix for 2 columns would to give 1 column a background colour and also the container a background colour. But I want to achieve something like this with 3 or 4 columns, each with their own bg colour/image. Columns should follow height of largest column.

#3

Hey Rowan, I wish there was an easy way to do this. You can write up some javascript to dynamically calculate the height of the row and make the columnā€™s class have that same height (subtract padding or whatnot), or you can just set an pixel height to make them all the same height.

One solution uses javascript, one uses CSS3. Neither is ā€œidealā€, but both will work. As far as making it responsive - as long as the content doesnā€™t change you can remove the height for smaller devices and it will stack normally.

#4

any news about it?
or maybe a workaround?

I need it to make my content have a ā€œtile feelingā€ using the same background color

just an example
what I have

and this instead is what I want

#5

Please let me know if anybody found a workaround

#6

same here! Anybody figured this out??

#7

not sure if this can help :
http://brown-bag-demo.webflow.com/flexbox

#8

Hi @Michel

Thanks for the flex box link.

Would that setup work for the issue i am having on my webflow site linked below?

http://brightsmile.webflow.com/dental-services/general-dental

Specifically the three column layout i have where each column has a different height, and i need it setup so each column has the same start height, the length is not important and that is determined by the content within each column.

Let me know, thanks!

#9

I updated the link brown-bag link. Noticed that I broke the design a bit, its my playground. So what I did is this.
A row with two columns. A class to the row and in custom code add this

  <style>
        .your-class{
            display: flex;
display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
        }
    </style>

Thats it!
Problems with the responsivness though. Working on that.
Update: you should add flex code for other browsers.
Update 2: I had to add custom @media code to make the columns stack on smaller screens. Maybe there is some special flex code for that, donā€™t know.

#10

Hi,

I have tried to solve the Problem with this Code.
http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

But in my Attempt it didnā€™t work.
http://sameheight.webflow.io

Did anyone know how to fix this?

#11

I did it
http://gleichehohe.webflow.io

3 Likes
#12

Hello @LNS I am also struggling to get the equal heights thing going, any advice on your attempt/success?

Thanks

Gareth

#13

@LNS, I agree, It would be great if you could share how you achieved thisā€¦ it looks great, nice work

#14

This is the way i did this.

hoehe.jpg1263Ɨ1248 474 KB

Inspired from this Link. It should work with 3,4,5 columns.
http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

5 Likes
#15

This didnā€™t work for me. .

#16

Show us your Link.
Perhaps we could help.

#17