- This topic is empty.
-
AuthorPosts
-
October 23, 2012 at 8:19 pm #40428
GAtkins
MemberConsider 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
October 23, 2012 at 9:20 pm #112493joshuanhibbert
MemberIs 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 #112494kgscott284
ParticipantWell, 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…
October 24, 2012 at 12:36 am #112501GAtkins
MemberOK 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
October 24, 2012 at 12:48 am #112502joshuanhibbert
MemberFirstly, 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 #112486GAtkins
MemberThanks. 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
October 24, 2012 at 3:15 am #112507joshuanhibbert
MemberNo worries; glad you got it working!
October 24, 2012 at 3:47 am #112510Kitty Giraudel
ParticipantBy 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.