Equal height - javascript

Many people have problems getting the heights of their divs the same length. There are good, valid, ways of doing this with only CSS. This isn't one of them. This uses javascript to find out which div is the longest and then set the others to be the same length as that one.

fixH( )

1

2

3

4

5

6

7

8

9

10

11

This div has 12 paragraphs

1

2

3

This div has 4 paragraphs but it's as long as the other one because of some javascript which makes the shorter div the same length as the longer one.

fixH2( )

1

2

3

4

5

6

7

1

2

3

4

5

javascript
function fixH(one,two) {
if (document.getElementById(one)) {
var lh=document.getElementById(one).offsetHeight;
var rh=document.getElementById(two).offsetHeight;
var nh = Math.max(lh, rh);
document.getElementById(one).style.height=nh+"px";
document.getElementById(two).style.height=nh+"px";
}
}

//this does it for three
function sortNum(a,b) { return b-a}
function fixH2(one,two,three) {
if (document.getElementById(one)) {
var obj=new Array(3);
var option=[one,two,three];
for(var i=0; i<option.length; i++) {
document.getElementById(option[i]).style.height="auto";
obj[i]=document.getElementById(option[i]).offsetHeight;
nh=obj.sort(sortNum);
}
nh1=nh.splice(1,2);
for(var i=0; i<option.length; i++) {
document.getElementById(option[i]).style.height=nh+"px";
}
}
}
//


window.onload=function(){
fixH('leftcolumn','rightcolumn');
fixH2('left','right','centre');
} CSS
#leftcolumn {
width:300px;
background: red;
text-align:center;
float:left;
}
#rightcolumn {
width:300px;
background: blue;
color:white;
float:right;
text-align:center;
}
#left, #right, #centre {
width:200px;
text-align:center;
}
#left {background:red; float:left;}
#centre {
background:white;
border:1px solid gray;
margin:0 auto;
}
#right {background:blue; color:white; float:right;}

Comments

#1
2006-06-16 JazzLad says :

Where was this page a couple months ago when I needed it!! smile

Nice tutorials & examples BonRouge, you get a spot in my bookmarks.

#2
2006-08-30 Gelatinous_Blob says :

Well handy - thank you! Works without problems that I can find...

#3
2006-10-05 MSpann says :

Thanks for this!
Now, I'm not a JavaScript programmer, so this may be a dumb question, but can this script be modified to:
1) Ensure that all columns are not only equal length, but also reach the bottom of the screen (if the content doesn't reach), and
2) If another script changes the length of one column (ie: an expanding menu), can this script be re-triggered to compensate for the length change?

#4
2006-11-16 Peeyush says :

I find this helpful.

#5
2007-01-15 paul says :

Thanks, at last I've found a simple solution to my problem. Without having to read a 6 page article!

#6
2007-02-25 Tris says :

I've tried about 6 solutions and this is the only one that works! It's also XHTML complaint! Thanks!

#7
2007-05-03 BlackNine says :

Great article! I love beer!

#8
2007-07-11 Me says :

Perfect =D thanks

#9
2007-09-12 twodayslate says :

I LOVE YOU!

jk Thanks

#10
2008-01-26 Jacek says :

Hi,
very nice solution. It breaks if user uses text resize, because both columns will keep their old fixed size no matter what happens with the text inside. In such case sth. like http://www.hedgerwow.com/360/dhtml/js-onfontresize.html
might help.

#11
2008-02-01 shez says :

thanks but what happens if JS is disabled on your user's site? back to square 1 eh..

#12
2008-02-20 john says :

i love you men thanks

#13
2008-03-19 kurinchilion says :

Many thankx man.

#14
2008-03-25 Albert Vila says :

Oh!! Bowing on you! :-)
I had the problem of the non-matching heights for weeks, always pushing it aside at every frustrating failed attempt to fix it... til the end of the website, when I couldn't wait anymore and I thought about JS instead of the damn CSS. Searching I came to your website to finally solving it!

Thanks SO much! :-)

#15
2008-04-09 per says :

Legend man!

#16
2008-06-30 a fan says :

I love you. You nailed it!

#17
2008-09-05 nice, but... says :

I've racked my brain trying to get height:100%; work in css. I couldn't get it to work.

This solution looks great but it fails when the width is a percent. The height of the div fails to expand when the width of the browser is reduced.

Does anyone have a solution for this?

#18
2008-10-15 simpanc says :

so awesome, works...
thanks so much - its just cool very happy

#19
2009-01-31 Bala says :

Awesome! Thanks for the snippet

#20
2009-04-29 sergiugothic says :

this is so cool,
exactly what i was looking for...

#21
2009-05-14 Quinn says :

Works great for me! Tks for sharing.

#22
2009-07-22 seren says :

Thanks a lot - very useful! I used it on 2 field sets and it worked brilliantly

#23
2009-07-22 Chris says :

Not working in Windows Safari. Columns do not expand to equal height. Also IE8's debug console for js is showing an error on the 2-column function, for the rh variable "object expected". It is fine with the lh variable, but is giving an object required error on rh.

#24
2009-08-21 j00_ says :

thx for the tutorial - didnt know about offsetheight

#25
2009-10-02 Micheal says :

Works with me in Safari (on windows vista) The only thing is that they dont resize anymore when the browserwindow is made very small. Is it possible to implement that? So the content never flows out of the div. Cause my browsers now just give a large bottom margin. Like Nice, but.... says.

Is there a solution?

#26
2010-01-06 Tarique Abbas says :

Thanks....The information have you published is really good....
Thanks Once Again...

#27
2010-04-06 Flo says :

Thanks man! Great work - you made my day!

#28
2010-06-01 SK RAGHAV says :

Its really great man you have made it... smile

Cheers!

#29
2010-08-07 Reza Farshbaf says :

Thank you for this handy workaround for equal height div. I was always using Faux column method but it has some limitations. By using this method it came very handy to add different bg images for both the columns.

Joomla Templates

#30
2011-03-07 Daniel says :

I've used this function on a couple sites I've done and I'm just encountering a weird glitch with it. Specifically I've expanded it to equal three columns instead of two, applied to three divs in the middle area of the page,and it worked just fine. Until, that is, I lookedin IE. In IE it resizes a fourth, completely seperate div. the IDs are in no way similar. I know it'sthe javascript becuase removing it causes the 4th div to remain it's original size.

#31
2011-03-07 BonRouge says :

Daniel,
That's interesting. Can you show me the page?

#32
2011-07-13 David Peck says :

You can also do this with JQuery
function fixHeight(jQuerySelector) {
var heighest = -1, items = $(jQuerySelector);
if (items.length > 0) {
items.each(function (index) {
$(this).css("height", "auto");
heighest = Math.max(heighest, $(this).height());
});
items.each(function (index) {
$(this).height(heighest);
});
}
}

#33
2012-01-12 mydu says :

And they say divs are better than tables....

This is why google still use tables everywhere

BTW you can do this purely in CSS. It just takes alot of div's, see: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

#34
2022-08-28 WxevWhits says :

personal narrative essay examples <a href="https://essaymeshing.com/ ">no essay scholarship</a> reflection essay example

#35
2022-08-28 JxecBossy says :

synonym for essay <a href="https://essaymesh.com/ ">narrative essay example</a> read my essay

#36
2022-09-27 WbzwWhits says :

what is furosemide tablets used for <a href="https://lasixona.com/ ">furosemide (lasix</a> is furosemide an antibiotic

Comment form

Please type the word 'brown' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url