I am trying to use the JQuery matchHeight plugin (http://brm.io/jquery-match-height/) to ensure that the borders on my sidebars will extend the full length of the page, but so far I am seeing no evidence of matchHeight actually working. It seemed like a petty straightforward script to use, so what am I missing?
Site here: http://www.westeros.org/Test
What is it with people using Jquery (or any scripting) to do what css does quite adequately? 
display: table or flex-box will do this easily.
I am very much a novice and only following the advice of the site where I got the responsive layout idea from. That said, what I need it to do is to always match the height of the columns in the same row, will these approaches handle that as well? As in, sidebars and middle content should always be treated as if they are the same height.
Display table will always keep columns in a row the same height.
Eg:-
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
.wrapper {
display: table;
width: 100%;
}
.wrapper div {
display: table-cell;
}
Flex-box is a little more complex, but can do this too, and moreā¦
You mean stretch down to the height of the largest column? This could be achieved by adding display: flex; to that .main container.
x-post
I was able to get the jquery solution to work by placing the code at the end of the page instead of at the top. I may look at the other solutions as well, thank you for suggesting those, but I have to admit the script seems a lot easier for someone of my level of css knowledge. Adapting the other solutions to work with the responsive grid seems more daunting for someone who has never done a responsive design before.
It will be worth your while as that script is a bit of a usability nightmare. 
The page is sluggish with it and if you scroll to the bottom and then resize the browser it goes all the way back to the top again which is a real pain.
There has never been a need for an equalising script like this since about 2002 and there are always better ways to do it. It may take a little re-organising but its well worth the effort
Sorry, my little rant was not directed at you personally. 
I just get a little niggled at some of these āResponsive Frameworksā that in my view seem to perpetuate a myth that RWD is very difficult to do and dupe people into thinking that they canāt achieve it without one. Though what they seem to do is unnecessarily over complicate (and bloat) things. In many cases a much slicker, slimmer more elegant solution can be found in some well thought out html and css.
To me using Jquery to make columns/boxes an equal height seems as silly as using it to make a background grey or some text red. Just use css, thatās what itās for.
This actually made me laugh:-
It handles many edge cases that cause similar plugins to fail.
So there are other plugins created for this purpose that donāt even work! 
Thatās like saying āOur octagonal wheels are far superior and give a much smoother ride than most square ones.ā
Well, from where I am sitting (aka, someoneās who isnāt really a web designer, just happens to have stumbled into having a large website to maintain), responsive design is very difficult. I really donāt fully understand why this layout works as it does, so if I go in and change things like display:table or display:flex, I donāt have the faintest idea what I am doing and what it might affect. This solution ā which isnāt actually a framework ā is the only one I have been able to wrap my head around enough to get working even! The equal height part isnāt part of the core layout, it was just provided as an easy solution for getting columns to equal height without changing the rest of the layout.
I made an attempt at using display:table, following the example given in the thread. I applied display:table to the āmainā class, which wraps around the three columns. I then applied display: table-cell to those three columns. That resulted in the first column being 100% wide and pushing everything else away.
Do you have a code example? Typically with a 3 column setup you would set the ātableā to max width and give the sides a width, letting the main (middle) take the remainder of space.
I was trying to apply it to the existing layout that I had brought up in this thread, at http://www.westeros.org/Test
The CSS for the layout currently looks like this:
#Wrapper {
margin:2em 2%;
}
.section {
clear: both;
padding: 0px;
margin: 0px;
}
.col {
display: block;
float:left;
margin: 1% 0 1% 2%;
}
.col:first-child { margin-left: 0; }
.group:before,
.group:after { content:āā; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
.span_8_of_8 {
width: 100%;
}
.span_7_of_8 {
width: 87.25%;
}
.span_6_of_8 {
width: 74.5%;
}
.span_5_of_8 {
width: 61.75%;
}
.span_4_of_8 {
width: 49%;
}
.span_3_of_8 {
width: 36.25%;
}
.span_2_of_8 {
width: 23.5%;
}
.span_1_of_8 {
width: 10.75%;
}
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 100%; }
}
.middle {
box-sizing: border-box;
padding:0px 1% 0px 1%;
}
Giving the sidebars a fixed width would unfortunately defeat the purpose of this layout, so I am not sure that display:table can be combined with it for the purpose of equalizing the columns.
Managed to fail to include the actual html:
<div class="section group main">
<div class="col span_2_of_8 sidebar left matchheight">
{embed="Westeros/Layout_Sidebar_Left"}
</div>
<div class="col span_4_of_8 middle matchheight">
MAIN CONTENT
</div>
<div class="col span_2_of_8 sidebar right matchheight">
{embed="Westeros/Layout_Sidebar_Right"}
</div>
</div>
So what I tried was to add display:table and width:100% to the āmainā class, and then display:table-cell to āsidebarā & āmiddleā, but that resulted in the first column being 100% wide.
I donāt know if thereās another way that I could approach making the columns equal height, without having to change the basic layout or abandon the way this setup handles a flexible number of columns.
Letās take it right back to basics. Here are two example 3 column layouts I have created to illustrate how simple it can be. One using display table and the other using flex box.
For the purpose of the example, I used elements directly as css selectors rather than using classes. This is really just to emphasise the point that there really is no need for the multitude of ābloatstrap styleā utility classes that people seem to enjoy overcomplicating their code with these days.
In practice of course you may want to use classes, as likely not all elements of a kind will want the same styling.
In this first display table example I went for the āmobile firstā approach, which is quite out of character for me, but in this case saves a couple of lines of code. 
This is the flex box example, not so āancient browser friendlyā but much more modern and flexible. Itās so flexible that itās fluid and responsive without actually needing any media queries. Though you may need to add one for some finer control should you need it. I just kept it query free because I can. 
Thank you for the examples. While I understand that its useful to take it back to basics, so to speak, I find that for a relative novice such as myself, ābasicā isnāt a great start in that I donāt know where to go if I want to achieve something more. That is why I found the css I am currently using so appealing: I understand how to get the margins I want, I understand how to control the column sizes. Because it allows me to divide up the page in more column and then decide how many I want the center (and the sides) to spawn, I have much more control over the percentages for each column. It also allows me to easily turn the header and/or footer into a nested set of columns, giving me more specific control over element placements.
So what I really want to do is solve how to make those columns equal height, not change up how I produce the columns in the first place.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.