The Matching Columns Script Video Tutorial: Matching CSS div Heights
One of the fundamental problems people have with CSS page-level layout is matching CSS div heights. Others might call this ‘matching column heights’ in web pages.
In this article/video (see below,) we are going to solve this problem using a lesser known JavaScript method: the Matching Columns Script.
Let’s start out by checking out a diagram that illustrates the problem:
People have come out with different solutions including the ‘Faux columns’ hack: using a vertically tiled background image to create the illusion of a column.
The ‘Faux columns’ hack/trick works, but it does have some limitations:
- You have to mess around with background images when creating the fake/faux columns effect - there is even more mucking about when you have liquid layouts.
- You won’t be able to use CSS border styling (on your div’s that create the columns) because it would reveal the hack.
THE BETTER WAY TO HANDLE THIS PROBLEM: DOM SCRIPTING (JavaScript)
JavaScript (sometimes called ECMA script,) is the programming language built into all the browsers that allow geeks/nerds, to have practically total control over how things appear in a web page - it’s very powerful.
Note: DOM scripting (the term,) is a quick way to describe using JavaScript to control a web page’s structure. If this makes no sense, don’t worry about it as you need no programming knowledge to use the technique that is covered here.
WHY IS THE JAVASCRIPT METHOD BETTER?
You are better off with the JavaScript method (rather than the ‘Faux columns’ hack, ) because:
- Once it is applied, you don’t have to worry about it as it automatically adjust itself to change with your page(s).
- It is much easier/faster to apply than the ‘Faux columns’ hack.
GETTING STARTED
Attached with this article you will find the files you need to apply the script:
- The Javascipt file.
- The CSS document.
- A sample web page that puts it altogether.
Now it’s time to watch the video to learn how to use it.
CONCLUSION
There is one downside to this technique:
It won’t work if people have JavaScript turned off. Fortunately, the vast majority of people out there have it on. Last time I checked my own stats, nobody had JavaScript disabled.
That said, though it looks a lot better when your columns heights match, I would not consider it mission-critical to a website. That is to say; people will still be able to use the website, so I am willing to accept that for some rare (paranoid) individuals, the columns will not match.
April 5th, 2006 at 7:43 pm
Thanks, Stefan. I always look forward to your tutorials and recommendations. You are my best source of up-to-date news in the web design world.
I am currently studying working with PHP and MySQL. If you would like to delve into that would be GREAT.
Thanks,
April 5th, 2006 at 10:42 pm
As always I never fail to learn something, I look forward to more tutorials and I agree with Tim, ever thought of going into working with PHP?
I could use tutorials such as these to pick up and get my own PHP pages to behave better.
As always Great work!
Kim
April 6th, 2006 at 1:14 am
Good video ! Clear and even learned other stuffs with this video.
Thanks Stefan!
April 6th, 2006 at 1:38 am
Thanks Stefan.
I find these videos really helpful. Please keep them coming! Just one little recommendation: for those of us who struggle with some of these techniques don’t go too fast. Also, always tell us how these things will look (yes, actually look) for those who have CSS and/or Javascript enablement switched off. What will they actually see?
I would welcome more CSS tools and tricks.
Many thanks again, Stefan!
April 6th, 2006 at 8:38 am
What a great solution! This is always a headache, and I appreciate your sharing your knowledge with newbies like me!
April 6th, 2006 at 8:51 am
@Robin,
When the script is “switched off”, the page will appear with the columns not being the same height - just check out the page in the video before the script is applied.
Thanks,
Stefan (web design heretic)
April 6th, 2006 at 8:53 am
@Kim and Tim,
You’re not the first to ask this. I’ve been putting off a PHP video for a while … maybe I should put it together at last?
April 6th, 2006 at 10:04 am
I have tried everything and failed to get this script working. My head hurts so much at the minute I can’t understand what is wrong. Do the divs have to be styled absolutely for this to work?
April 6th, 2006 at 10:21 am
@ Mathew,
Remember these points:
1. The script needs to be linked to the page.
2. That the ’s are tagged with the class: column
Let me know how it goes.
Stef
April 7th, 2006 at 11:50 am
Why not just use a table with two TDs? The two TD cells will automatically adjust their heights to be equal…no additional scripting or hacks required!
April 7th, 2006 at 3:02 pm
@mfos,
Good point. But these days, lots of web designers don’t want to use tables for page-level layout because:
1. Tables are semantically not designed for page design; they are designed to hold tabular data.
2. Most importantly, tables lock the look/style of your pages to the structure/code, where if you use div’s positioned with CSS, you are free of that constraint.
Web standard zealots have a few other reasons (bogus in my opinion) for not wanting to use tables for page layout. That said, I feel that the separation of structure from style(in other words: presentation,) is a good enough reason to want to not use tables if at all possible.
-
Look at how clean the CSS code is versus the same thing with tables and you’ll get an idea.
April 11th, 2006 at 12:48 pm
It works, but there is one small problem. I have a nav column that has a padding-top of 30px, and this throws it off the other column 30px at the bottem. Its not that major of a thing, but a small bug.
April 11th, 2006 at 1:21 pm
“I have a nav column that has a padding-top of 30px”
I would have to test for that.
I can’t see why there would be a problem, given that the script checks the div height’s after the page is loaded, and then makes the change …
What browser are you using?
April 12th, 2006 at 8:41 am
I was testing on firefox, camino, and safari. If you would like, I can recreate it and give you the link.
May 1st, 2006 at 6:43 am
Great script!
Is it possible to run this twice on a page? Two different sets of columns? Sorry, my functions know how aint so good.
May 1st, 2006 at 9:16 am
@Rick,
Yes.
You need to:
1. Create a copy of the function and rename it.
2. Change the names of the columns (in the script), the new script is looking for.
3. Rename your other set of divs the match it.
There are fancier ways to do this, but since you’re not the greatest programmer … this is probably the easiest.
June 8th, 2006 at 6:22 pm
thanks stefan - one thing though - if a user enlarges font size when page has loaded the text runs out of the div and dose not resize, its fine if you refresh the page afterwards- any idea how to get around this - not a biggie but a nice touch!
love your work - five gold stars for this one!
June 8th, 2006 at 11:55 pm
@bassmonkey,
You would have to write code that would look for font-size changes.
The first issue that pops up in my head, is that people would typically do this with the browser controls … I’m not sure if you can trap for that event with JavaScript?
That said:
I think that most people will have their font size set, before they hit the page. It is rare for people to change their font size from site-to-site.
June 9th, 2006 at 12:47 pm
true! also only other problem i have is running two scripts on one page - i have renamed the copy of the js file and the function in the code, also the bit in the /bcolumn/b thingy has been changed to column2, and divs have id of column 2 but the script seams to overide the first script still (ie the first one stops working but the second one is fine - strange!)
have i missed something?
thanks
June 12th, 2006 at 9:00 am
@bassmonkey,
You have two scripts running because you have two sets of ’s that are of different heights?
That said, I will have to look at your problem* … it has been a little while since I worked on that code and I tend to forget the details.
* I’m really busy so don’t wait for me!
August 10th, 2006 at 7:34 am
I used the srcipt and it works in Firefox however in IE 6 the third column on the right is not the same length as the left and content columns - any ideas?
August 10th, 2006 at 9:45 am
Hi Martin,
I would check your code again because I use it on many sites (killerphp.com, killersites.com) and they all work with both IIS and FF.
CIAO
September 5th, 2006 at 6:16 am
Trying this script out in Dreamweaver 8 with two columns. It works fine in ‘Firefox’ but not at all in IE6. Am I getting the same trouble as Martin? Or am I doing something wrong? The javascript is in the root folder with my CSS and html files. I have placed the class style after each column div. It still won’t work in IE6.
September 6th, 2006 at 3:50 am
Sorry Stephan
I rechecked the coding and it was wrong!!
It is now all OK
Many thanks
September 15th, 2006 at 3:31 pm
Wow, what a simply perfect script. The biggest issue I have is getting columns to size properly across IE & FFox, and this script solves the problem. I’m amazed that all it took is adding a class to column divs… thanks a million!
October 23rd, 2006 at 11:13 am
Thanks alot! The script was great and worked equally good on IE and Firefox. I will look forward to the upcoming articles from you! Thanks.
October 27th, 2006 at 4:15 pm
Hey there,
Trying to use your script on a page that has dynamic content generated by JS. The user can click a link to add more fields to a form, thus expanding the div the form is in. The problem is that i also need to expand the navibar - any suggestions?
October 29th, 2006 at 8:32 am
How do I get this script to work with ajax columns that don’t require a whole page reload?
This script only runs once per reload, but I need it to continously check the column heights because I use ajax to change the column height so the page never gets reloaded.
October 29th, 2006 at 6:05 pm
How do I get this to work on a site that uses ajax to change the column heights? Using ajax the whole page doesn’t get reloaded, so the javascript doesn’t run and so doesn’t check the column heights.
October 29th, 2006 at 6:51 pm
@T Says,
I would insert a call to the the Matching Columns Script when the AJAX script is activated.
October 30th, 2006 at 3:06 am
I tried to call the function matchColumns() but it doesn’t work. It only works if you assign the script to window.onload
October 30th, 2006 at 3:31 am
Another problem is that the Matching Columns script checks for the highest column and then assigns all colum heights that value. If I then use ajax to lower a column height, the script doesn’t lower the other column heights to match (assuming we can call the script when the ajax script is activated).
In other words, we have two columns A and B, B being higher. The script sees that B is the highest column and therefore sets column A’s height to match. We then use ajax to lower column B’s height. Rather than lowering column A’s height to match (the right thing to do), the script now sees column A as the highest column and therefore raises column B’s height. Column heights never get lowered, only raised. This problem doesn’t arise with normal page reloads because all columns get reset to their natural heights. But with ajax, column heights never get reset.
October 30th, 2006 at 7:24 am
@T,
“I tried to call the function matchColumns() but it doesn’t work. It only works if you assign the script to window.onload”
How about forcing a window reload on the AJAX call.
October 30th, 2006 at 7:50 am
Now that I think about it, I don’t know if forcing a page reload will help … since I guess things would be reset.
I’m sure there is a solution, I just don’t have the time to debug that.
October 31st, 2006 at 12:40 pm
First Stefan, I would like to thank you for this script, I found your site fairly easily through a google search for this, and you have lots of good information. I made a change to your script to make it work for an ajax application similar to that of @T’s above, I am using the script in combination with a script to load a separate style sheet if the users screen resolution is above 950px, thus making 2 columns of data isntead of one elminating the need to scroll so much, well I had one column had more data pull from the db, and it caused some shifting, well I ended up using an event listener to call the function if the window was resized. So my suggestion is to use an event listener to call the matchColumns() function after the ajax event, and you shouldn’t have any problems.
ex:
function attachEventListener(target, eventType, functionRef, capture)
{
if (typeof target.addEventListener != “undefined”)
{
target.addEventListener(eventType, functionRef, capture);
}
else if (typeof target.attachEvent != “undefined”)
{
target.attachEvent(”on” + eventType, functionRef);
}
else
{
return false;
}
return true;
};
the above should work for a few browsers
you could call it with..
attachEventListener(window, “resize”, matchColumns, false);
replace resize with the event you want to trigger this.
October 31st, 2006 at 12:45 pm
@arthur,
Thanks for posting this.
November 6th, 2006 at 3:07 am
THANKS!!!
Since some of my divs only use bg images, I had serious problems getting this to work. It would appear that you must have content, even if it is a simple - now to find a way to hid my clearing div.
November 23rd, 2006 at 4:52 pm
I am trying to get this script to work for a slight redesign of my site and it works fantastically for Netscape and Firefox but I just get a blank page in IE (see link to site). It’s not like the page is disappearing though because if you view source it’s all there, and the page title loads. I’m at a loss as to why this is happening. Any ideas?
December 4th, 2006 at 6:47 am
The script worked on the two columns, however, it seems to be affecting the next div down. I can’t quite get it to stop. Sometimes it works and sometimes it doesn’t. The columns are ALWAYS even, now, but I can’t get it to stop messing with the div below them. Here’s the link if anyone wants to tell me what a “dumb@ss” I am for not being able to figure it out:
http://www.angelopc.com/angelopcphp/index.php
December 4th, 2006 at 11:54 am
@ Ed C,
You should post your question on the killersites.com forum. This sounds like a problem with the page structure. The script simple compares columns and makes them all the same height.
If your layout is such that something gets in the way .. you need to change the structure of your CSS.
-
If it makes you feel any better, the CSS page layout paradigm sucks and is hard to manage for several layouts.
December 10th, 2006 at 3:56 am
If the only concern with the use of the border styling with this script is the fact that there is a sudden jump in length, then that is a small price to pay for something to look the way I want it to.
Thank you for this help.
December 10th, 2006 at 11:10 pm
@MC,
Glad you found the script useful - I use it all the time.
Stef
December 11th, 2006 at 10:03 am
I have tried this solution to my navigation bar not matching in length to my mainbody. I have followed your directions precisely, including the exact code and linking to the css and javascript files and then tagging my columns as class column; however, it is not working. I am using dreamweaver 8 and using a template for the several pages of the site I’m building. Am I doing something wrong or is there some other issue with using the javascript code in a template?
Thanks a lot for any help!
December 11th, 2006 at 10:37 am
@Justin,
I would first try this with a simple layout and see if it works there.
The most common problem is just people making typo’s, but it could also be related to something in the structure of your page.
… I personally have never run into any issue related to page structure.
Let me know how it goes.
Stefan
December 12th, 2006 at 9:21 am
This may be unreleated, but why does the div go much large than the text that supports it? I have one paragraph and I have to scroll down to see the bottom of the div. I drew a bottom border to show the example.
Pretty sweet though…
December 12th, 2006 at 9:30 am
The script does this:
1. Finds all the divs that you mark as being columns.
2. Finds the div that is tallest.
3. Makes the other div the same height.
… so the height of your div’s is set by the tallest div.
Stefan
December 13th, 2006 at 12:00 pm
This script is awesome! One question though…
I’m building my site with a CSS only layout with an alternate style sheet for print. I’ve got 2 main columns on the page, one of which I hide from the print version. When I do a “Print Preview” I’ve got large gaps inbetween certain elements.
Is there a way I can turn off the script in print mode?
—
RE: Chad VanWalsum’s post about the padding issue above…
I had the same problem with mine at first as I had a padding of 45px at the top of one of my columns so it bumped the other column down as well. I solved that problem by putting the padding on the element inside the column to push it down.
December 13th, 2006 at 3:39 pm
“Is there a way I can turn off the script in print mode?”
Do a check to see if it actually gets printed.
December 14th, 2006 at 9:22 am
I have modified the script to work with multiple class groups also with elements with multiple class names
/*
Derived from a script by Alejandro Gervasio.
Modified to work in FireFox by Stefan Mischook for Killersites.com
Modified to work with multiple class groups also with elements with multiple class names
by Jonathan del Mar (dec-14-2006)
How it works: just apply the CSS class of ‘column’ to your pages’ main columns.
to work with different classes
add
var columns = new Array(’class_name1′, ‘class_name1′…);
by Jonathan del Mar
by default the script will call
matchColumns();
and the default class_name is ‘column’
(see the bottom of this script)
by Jonathan del Mar
*/
matchColumns=function(my_class){
var divs,contDivs,maxHeight,divHeight,d;
// get all elements in the document
divs=document.getElementsByTagName(’div’);
contDivs=[];
// initialize maximum height value
maxHeight=0;
if (!my_class) {
my_class = ‘column’;
}
my_regex = new RegExp(’(.* |^)’ + my_class + ‘( .*|$)’);
// iterate over all elements in the document
for(var i=0;i elements with class attribute ‘container’
//if(/\bcolumn\b/.test(divs[i].className)){
// modified by Jonathan del Mar to match ‘column’ in multiple classes
if(my_regex.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
// determine height for element
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
// calculate maximum height
maxHeight=Math.max(maxHeight,divHeight);
}
}
// assign maximum height value to all of container elements
for(var i=0;i
var columns = new Array(’class_name1′, ‘class_name2′, …);
to your html header.
December 16th, 2006 at 11:59 am
Stefan–
A quick thank you for your code and tutorial on making columns of equal lenght when using CSS.
December 19th, 2006 at 4:13 pm
Hey,
I have found an issue with this script. I have attempted to add an onload event to the tag. Once there is an onload event the columns fail to work. For reference, I was using the google maps API (And it requires a body onload function)..
No clue why this occurs. Without the onload event it works perfectly. This also occurs with any onload event.. Not GMAPS related
December 19th, 2006 at 6:32 pm
@Ryan,
It is not clear to me: are you trying to call both function on the onload event?
Can I see the way you are calling them?
December 20th, 2006 at 11:44 am
Hey there,
Im not trying to call the javascript via body onload. I’m loading it the standard way ( )
The problem is that when I add an ‘onload’ event to the body tag for something else, for some reason it interferes with the matching columns and then fails to work
December 20th, 2006 at 11:48 am
Standard way:
January 15th, 2007 at 2:02 pm
Ryan, Stefan
I am experiencing the same problem with having an onload call in the body element.
Reason its there is I have a form, and for usability I am using the onload call to place the cursor into the first form field.
As soon as I remove the onload function from the body element the columns match up like butter.
Is there a way for the matching_columns script to work in harmony with a body onload?
thanks
January 25th, 2007 at 8:04 pm
Someone has submitted a new version of the script - the details are in the code:
/*
Derived from a script by Alejandro Gervasio.
Modified to work in FireFox by Stefan Mischook for Killersites.com
Modified to work with multiple class groups also with elements with multiple class names
by Jonathan del Mar (dec-14-2006)
How it works: just apply the CSS class of ‘column’ to your pages’ main columns.
to work with different classes
add
by Jonathan del Mar
by default the script will call
matchColumns();
and the default class_name is ‘column’
(see the bottom of this script)
by Jonathan del Mar
*/
matchColumns=function(my_class){
var divs,contDivs,maxHeight,divHeight,d;
// get all
divs=document.getElementsByTagName(’div’);
contDivs=[];
// initialize maximum height value
maxHeight=0;
if (!my_class) {
my_class = ‘column’;
}
my_regex = new RegExp(’(.* |^)’ + my_class + ‘( .*|$)’);
// iterate over all
for(var i=0;i
elements with class attribute ‘container’
element
elements
// make collection with
//if(/\bcolumn\b/.test(divs[i].className)){
// modified by Jonathan del Mar to match ‘column’ in multiple classes
if(my_regex.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
// determine height for
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
// calculate maximum height
maxHeight=Math.max(maxHeight,divHeight);
}
}
// assign maximum height value to all of container
for(var i=0;i
}
}
// Runs the script when page loads
window.onload=function(){
if(document.getElementsByTagName){
matchColumns();
if (columns) {
for(var i=0;i
}
}
}
}
January 31st, 2007 at 7:57 am
I used your tutorial and I am very impressed by the video as well as the end result; much better solution to others I have come across while searching for a solution to this problem.
I have one issue however … although my left hand div now has extended in length, there is a 1 pixel gap between it and the footer image. Any suggestions on why this may be?
Thanks for your help
January 31st, 2007 at 8:46 am
Great stuff! I put it in the new wordpress theme I’m building, and theres a slight problem: now it makes the colums way too high, resulting in lots of empty space between posts.
how can I fix this? The CSS for the two columns is this:
#flare {
float:left;
width:142px;
text-align:left;
font-size:11px;
color:#FFFFFF;
font-family:helvetica;
color:#FFFFFF;
padding: 10px 4px 0px 10px;
line-height:130%;
background: #2D2D2D;
}
#post {
width:530px;
text-align:left;
margin-left:156px;
font-family: helvetica;
font-size: 10pt;
line-height: 130%;
padding: 6px;
font-family:helvetica;
color:#000000;
}
January 31st, 2007 at 9:37 am
@Frances,
I would have to see your layout, but keep in mind that the script simply compare the two or more
So I would guess that the script is just revealing some other aspect of your layout that was not apparent before you applied it.
I’m glad you liked it.
Stefan
January 31st, 2007 at 9:47 am
I’ve put a screenshot of what happens at http://www.trythisonforsize.net/downloads/screenshot.png
Hope you can help me out…
January 31st, 2007 at 11:26 am
I think i know what happens: it makes every post the size of the longest one; this is probably not going to work for a blog right?
January 31st, 2007 at 11:30 am
@Rik,
This has to do with the CSS code and the structure of the blog template and not whether or not it is a blog.
You would have to dig into the template code to work it out.
BTW: did you design the templates?
February 11th, 2007 at 12:36 pm
Hi Stefan,
thanks a lot for your script, it really saved me a lot of time.
Unfortunately I discovered a small problem when i was working on a layout with 3 divs where two of them have a 1px border.
The div without border is missing 2px…as far as I can see the borders are drawn as outlines!
I tried to solve this problem with additional CSS styles but I couldnt find any proper solution.
Is there any way to expand your script with an additional class e.g.:
.column_no_border = maxHeight +2px or .column_border = maxHeight -2px ?
Maybe you could put me in the right direction (because i dont have any JS skills
Thanks in advance
Chris
February 12th, 2007 at 12:06 pm
Hi,
I haven’t looked at the script in a while. But I suspect that what you want is possible.
Sorry I haven’t the time to look into now, but maybe later.
Stefan
February 17th, 2007 at 6:07 am
Goos script, thnx 4 sharing it. I’ve noticed when implementing it that it is very slow 2 apply onload. I’ll have 2 hover over some javascripted links in order 2 get it going! Do u have any idea y would that happen?
February 17th, 2007 at 9:00 am
I haven’t noticed much of a speed issue myself … but I haven’t tested every possible layout.
That said, I would suggest creating a basic 2-3 column page and test the script as your gradually add complexity to your page layout.
.. Hopefully this process will help you identify what is slowing things down.
Stefan
February 17th, 2007 at 9:06 am
[...] I decided to create another blog post to make it easier to find the updated version of the important matching columns script - it was buried in the originals article’s comments. [...]
March 1st, 2007 at 3:08 pm
like the script… but it doesn’t work with multi-column liquid layouts as far as i can tell…
seems to only work on reload for me. is there any way of adding an on_resize hook?
March 1st, 2007 at 3:17 pm
@Rob,
I haven’t tested all possible layouts … that said, it should work whether it be liquid or not … the logic of the programming is related to the heights of the targeted
I would take a closer a closer look at how you apply it.
PS: we may wan’t to check out webshapes.org for a growing collection of open source templates.
Stef
March 7th, 2007 at 4:54 pm
Hi Stefan.
Great script, except…..
I have used it on a 3 column layout but have found when the centre “content” column has dynamic content (ie generated by php) the column height stops at the height of the tallest other column (in this case the menu). When I populate the centre colum with regular html it works fine.
Could you offer any advice please
Regards.
March 8th, 2007 at 6:21 pm
@Dylan,
My guess is that it is a timing issue where the script is being fired before the content has been filled in completely.
.. This is a hard one to explain (and might not make any sense,) but what it comes down to (in theory) is that the script needs to be delayed a second or two before firing
… perhaps create a function that calls setTimeout() that calls the columns script.
?
Another option is to change the order that which the columns appear in the page’s code - make sure the dynamic column comes in first.
Hope that helps,
Stefan
April 9th, 2007 at 10:23 am
Stefan,
The script worked fine in IE 7 and Firefox, but I had a javascript problem with IE 6 (same problem, tested on 2 browsers). The problem was that the div Height was returning NaN. This could be because of my goofed up styles, but I was able to fix it by adding the following:
if (isNaN(maxHeight)) {
// GRRRR IE 6 behaving badly
if (pageName==’somepage’) {
maxHeight=3730;
}else if (pageName==’anotherpage’) {
maxHeight=825;
}else {
maxHeight=0;
alert (’missed one: ‘ + pageName);
}
}
The pageName is sent in using the form’s onload event like this:
where doLoad calls the matchColumns(pageName):
function doLoad(ButtonName) {
setButtonBackground(ButtonName) ;
if(document.getElementsByTagName){
matchColumns(ButtonName);
}
}
To get it to work, I redefined matchColumns like this:
matchColumns=function(pageName){
….
…
}
Kludged, but working.
Thanks for the post, by the way.
Cheers,
Steve
April 9th, 2007 at 10:36 am
@Steve,
Thanks for sharing your modification with us.
Stefan
April 10th, 2007 at 1:27 pm
Thanks for this script, it’s great!
After reading the complete comments, I couldn’t find the source of the updated script to manage multiple calling for different set of heights (either the code was badly rendered in the replies of the link Stefan provided is empty, and I needed to call it 4 times) so I made some small updates and thought I’d share it with everyone.
From the original script (available to download), I replaced 2 lines :
replaced the function first line
matchColumns=function(){
by
function matchColumns(classname){
and the IF
if(/\bcolumn\b/.test(divs[i].className)){
by
if(new RegExp(”\\b” + classname + “\\b”).test(divs[i].className)){
So now I can call the same function and passing the class name in parameter like this :
matchColumns(’column’); // class=column
matchColumns(’maincolumn’); // class=maincolumn
Enjoy
Michel
April 10th, 2007 at 1:51 pm
I have applied this script to one test page, but it doesn’t seem to work. Any idea why? The test page is http://www.presentationsdirect.com/Laminators/GBC-Laminators_test.asp.
If it was working correctly, the divLeftColumn is supposed to extend down to the length of the divContent and divLeftColumn would have a gray background.
April 23rd, 2007 at 5:24 pm
Michel (or anyone),
I dont understand how to call the javascript function from within html.
I have 2 different situations on one page where Id like to use this script but only one will work. I tried creating two different js files )renamed and called to each, but only one will work. Please help! Thanks so much
May 3rd, 2007 at 12:33 am
Dear Stefan,
Many thanks for this script. It works perfectly for me. However I have a question. Currently the function matchColumn is triggered by windows.onload. Is there a possibility that I also can trigger the matchColumn function when a browser window is resized.
I’ve tried:
windows.onresize=function() {
if {
if(document.getElementsByTagName){
matchColumns();
}
}
However that doesn’t seem to work. Any idea how I could fix this? Many thanks for your response!
Regards,
Tom
July 5th, 2007 at 7:11 pm
This script works well, but when I try to add a slideshow script to my page, the matching columns script stops working. The slideshow is triggered with onload in the body tag. Any idea why this is happening?
Thanks,
Debbie
July 31st, 2007 at 12:21 pm
Hey Stepan,
I have used your script multiple times without any problem. For some reason I can’t seem to figure this one out. Currently designing a 2 col layout, header, content, nav, footer. content and nav positioned relative with the class=”column” assigned to each div. the script to call the js is in my code. the js is on the server ect. any feedback would be greatly appreciated.
July 31st, 2007 at 5:54 pm
Just in case anyone wants to know i figured out my problem. as a looked into how the matching_columns.js worked i noticed on line 67 if has a onload function. that got me curious b/c I was using this piece of code to do the swap image restore function. i removed this and just had my tage and my columns matched perfectly.
August 6th, 2007 at 6:19 pm
i just wanted to drop you a line and say thank you so much for publishing this script. it worked perfectly with the site i’m working on, what a relief! thanks so much.
August 7th, 2007 at 1:24 pm
Veronica,
Glad to hear you found it useful.
When I ran into the columns problem, I knew that I had to get a fix out there for everyone.
Stefan
September 15th, 2007 at 11:17 am
I’m having MUCH troubles trying to get the cols to match. I believe that I’ve got the proper files/code inserted as is needed, but the dang left hand side gold coloured will NOT stretch enough to match the main content .
PLUS, I also used the same class on the overall so that the footer will always drop down to the bottom of the overall content and that 1px black border will always be outside all content….
What am I doing wrong?
Test page is at — http://www.kkt-testserver.com/Lions/index.html
Can NOT get this straight!!!! Dang it!
Jim
October 4th, 2007 at 3:53 pm
Have a fairly hacked up site-but I was able to get it to work on FF and IE7, ie6 not so much the left drops down about 200px lower than it should and doesn’t fill. What am I doing wrong?
October 4th, 2007 at 4:25 pm
@Jenga,
It is very hard to help without code samples … That said, please post your question to the forum so other people can get involced:
http://www.killersites.com/forum/
Stefan
October 20th, 2007 at 3:27 am
Hello everyone. It’s a great script. I have a question. I try like Michel say “multiple calling for different set of heights” with the updates
“replaced the function first line
matchColumns=function(){
by
function matchColumns(classname){
and the IF
if(/\bcolumn\b/.test(divs[i].className)){
by
if(new RegExp(”\\b” + classname + “\\b”).test(divs[i].className)){
So now I can call the same function and passing the class name in parameter like this :
matchColumns(’column’); // class=column
matchColumns(’maincolumn’); // class=maincolumn
”
But it doesn’t work. I’m sorry, I’m pretty new in this, so I apologize if my question sounds stupid. Here is a little example that I’ve try to do.
http://smile.sellinet.net/col/tmp_NEW.html
If anyone can help, I would be grateful. Excuse me, for my bad English.
October 30th, 2007 at 3:12 pm
Thanks for the hack - it saved my butt on a project for work! Good vid too.
October 31st, 2007 at 5:18 pm
Excellent tutorial! Worked perfectly for me. Thanks!
November 16th, 2007 at 3:24 pm
I don’t see how this works Stefan. If you would give the navigation background a different color in your example, maybe some of us newbies could see the columns being matched up. However, both have no background (white default).
I used your files and only changed the following:
1) changed the color of the navigation column (in the style sheet) to color: #CC0000. (so I could possibly see the difference).
2) Decreased the quantity of text in DIV “CenterDoc” to only 2 paragraphs of data.
I have posted the results for viewing. The navigation column continues down to infinity, where the CenterDoc column terminates a little after mid page going down. Am I missing something here? Shouldn’t the left navigation menu (in red) cutoff at the same point where the text in the CenterDoc column ends?
Please any advice appreciated.
November 16th, 2007 at 4:29 pm
Stefan,
I stand corrected. It seems to be working in IE, but in FF the left navigation column (red) just continues down to infinity. So, perhaps FF is not picking up the Java Script?
Any ideas?
Thanks
November 28th, 2007 at 3:03 am
unfortunately, I have no ideas for now
December 7th, 2007 at 6:15 pm
i don’t know what i am doing wrong but it’s somehow not working under IE6.checked and rechecked my codes still nothing.i am using a w3c css template.
any idea on how to fix it? thank you.
December 15th, 2007 at 10:55 pm
Absolutely the best! Thanks. This made my life sooooo simple. I am moving from all html to mostly CSS and you saved me gobbs of work!
January 28th, 2008 at 12:19 am
Hi, I am trying to incorporate your script into Wordpress, as the faux columns technique simply won’t work with my template. I have copied the script src line into my header.php template, and have applied class=”column” to the div ids, but it does not seem to work.
(Currently I am only testing in Mac/Firefox 2.0, but will test other browsers/platforms once I get this aspect of the site sorted out).
Any suggestions on what I might be doing wrong?
January 28th, 2008 at 10:55 am
Hi Michelle,
It is hard to diagnose without seeing all the code. But let me think …
Be sure that you are loading the .js file properly … check your paths.
Stefan
January 29th, 2008 at 7:01 pm
Hi Stefan,
Here is the header.php code. I tried renaming the script path to the full url, but that didn’t seem to help.
<meta http-equiv=”Content-Type” content=”; charset=” />
<meta name=”generator” content=”WordPress ” />
<link rel=”stylesheet” href=”" type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”" />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”" />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”" />
<link rel=”pingback” href=”" />
<a href=”/” title=” “>
January 29th, 2008 at 7:04 pm
Sorry, that didn’t seem to work.
/*
<meta http-equiv=”Content-Type” content=”; charset=” />
<meta name=”generator” content=”WordPress ” />
<link rel=”stylesheet” href=”" type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”" />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”" />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”" />
<link rel=”pingback” href=”" />
<a href=”/” title=” “>
*/
January 29th, 2008 at 7:06 pm
Apologies again. I obviously don’t know how to copy&paste code so it shows correctly in the post.
February 3rd, 2008 at 11:57 am
Stefan, I am so happy I can cry. Yes, perhaps I should get out more
I have made a very complicated template system for a CMS called Mambo and the last thing I needed to do was this. I didn’t think I’d ever manage. It is great! Everlasting gratitude from Tengu!