Equal Height Columns In The Context of This Pen

[GAtkins]

Consider this pen:

http://codepen.io/GAtkins/pen/yCmxH

What would be the easiest, most elegant way to make each of these 3 columns equal height within the context of a flexible/responsive design and unequal content?

Thanks in advance for any suggestions.

Glenn

[joshuanhibbert]

Is this what you are after? http://jsfiddle.net/joshnh/Qq9es/

You may also want to wrap that in a resize event.

[kgscott284]

Well, this is is a very simple solution (perhaps sloppy, maybe not perfect?) I came up with in jQuery…(not saying I created the idea, I am sure it has been done before me)

http://codepen.io/DesignNinjaNet/pen/phuEt

It is extremely lightweight…

[GAtkins]

OK guys thanks for the help. I am continually amazed at the talent and knowledge on this board.

A little background: I know just enough about HTML5 and CSS3 to be dangerous and virtually nothing about jquery.

Both of your pens/jsfiddles work but not on browser resize.

I suppose that was josh’s reference to wrapping it in a resize event. Although I understand what that means conceptually, I haven’t the slightest clue how to implement a resize event.

I am slowly working my way up the vertical learning curve of HTML5/CSS3/JQuery.

For some reason when I insert/attach either one of yours jquery into my live code it doesn’t seem to work on my live site.

Here is the link to the live site with the script lines near the bottom of the body tag in lines 615 and 616 but commented out currently.

http://garrisonassetmanagement.com/newflexmenu2.php

Do either of you have any thought why this is not working on my live site?

Thanks again for all the help.

Glenn

[joshuanhibbert]

Firstly, it isn’t working on your site as you haven’t given each of the columns a class of column (as used in both of our solutions). Secondly, here is my solution wrapped in a resize event: http://jsfiddle.net/joshnh/Qq9es/

[GAtkins]

@josh,

Thanks. got it to work by adding the class of column to that group.

Even duplicated the code and created a section for “column2” in a different place in my site.

Thanks so much for your help. You too kgscot.

Glenn

[joshuanhibbert]

No worries; glad you got it working!

[Kitty Giraudel]

By the way they are a few ways to do it with pure CSS, but you may want to stick with jQuery if you don’t want to get crazy.

https://css-tricks.com/fluid-width-equal-height-columns/

[Author]

Posts