- This topic is empty.
October 23, 2012 at 8:19 pm #40428
Consider this pen:
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.
GlennOctober 23, 2012 at 9:20 pm #112493
Is this what you are after? http://jsfiddle.net/joshnh/Qq9es/
You may also want to wrap that in a resize event.October 23, 2012 at 9:27 pm #112494kgscott284Participant
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)
It is extremely lightweight…October 24, 2012 at 12:36 am #112501
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.
Do either of you have any thought why this is not working on my live site?
Thanks again for all the help.
GlennOctober 24, 2012 at 12:48 am #112502
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/October 24, 2012 at 2:16 am #112486
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.
GlennOctober 24, 2012 at 3:15 am #112507
No worries; glad you got it working!October 24, 2012 at 3:47 am #112510Kitty GiraudelParticipant
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.
- The forum ‘CSS’ is closed to new topics and replies.