Websites for sale:
Used Cars for Sale - $175 and Car Sale.
If interested drop me a line at ken@kensfi.com. Thanks!

Have questions about Toronto? Check my latest project: Ask about Toronto!

Set a DIV height equal with of another DIV

Posted on July 23, 2010

If you’re a looking for a method the make sidebar height be the same all the time with the content then you are in the right place. I’ve been looking for a solution for a while and instead I’ve got, along the way, 5 possible ways to accomplish this. To be honest, I’ve used only one of these but you might like to try it all and see which one is working the best for you to get the job done.

Four of these methods are using jQuery and the last one is using CSS. Basically this situation is more about styling the page so it should be using CSS and not jQuery but since these methods exists and are used on a large scale by front end web developer let’s take a look at them. If you know even more methods drop a line here, we will love to hear what you’re saying.

The first method is based on a built-in jQuery function, height, which is referring to the height of the element which is applied on, and the css function which is adding the style we want to defined on this selected element. This being said, what we have here can be translate like this: select the class sidebar and apply on it the height from the content. Height function is taking only the number of pixels so you’ll have to add ‘px’ as measurement units.

$(".sidebar").css({'height':($(".content").height()+'px'});

The second method is pretty straight forward and is more simplified.

$(".sidebar").height($(".content").height());

The following is based on creating a JavaScript variable for which one is assigned the value of the highest column. Later on we can use this variable to define the height for any DIV we want, in our case is being used to define the sidebar height .

var highestCol = Math.max($('.sidebar').height(),$('.content').height());
$('.sidebar').height(highestCol);

The last jQuery method is pretty similar with the previous one but a little more complex based on the fact that we’re defining a function, who’s being used letter on, within our call.

$.fn.equalizeHeights = function(){
  return this.height(Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}
$('.sidebar, .content').equalizeHeights();

The last method, and which seams to be more appropriate for our situation is based on defining a background image for wrapper of the .content and .sidebar, so will give the user the impression that the sidebar has the same height as the content. Add a repeat-y on this background and you’re done. So far this CSS method is the easiest one and is not requiring any web programming knowledge.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Related tech articles

JavaScript

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Please read before commenting:

I don't tolerate spam comments. Be human and polite. If you are signing as "Computer repairing", "iPhone store" or other kind of bullshits you'll be marked as spam.
USE YOUR NAME! Thanks!

Comments

One Response to “Set a DIV height equal with of another DIV”

Leave Comment

(required)

(required)