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?
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)
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.
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/
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
Is this what you are after? http://jsfiddle.net/joshnh/Qq9es/
You may also want to wrap that in a resize event.
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...
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
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/@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
No worries; glad you got it working!
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.
http://css-tricks.com/fluid-width-equal-height-columns/