Blogger Trick - Make sidebar column height equal to the main content using jQuery

With CSS based layouts it is a common problem that columns can not be made of equal height. By Googling you may find may ways to solve this. Here I am going to show you an easy solution to achieve this comparing to the solution given by "Amanda" in her article "How to make columns of equal height in Blogger".

Approach here is also the same but I am using jQuery to cut-short Javascript code.

Assuming we have two columns "main-wrapper" and "sidebar-wrapper" . Below line will simply assign the height of main-wrapper to sidebar-wrapper .. which simply we want.

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/> 
<script type='text/javascript'>
$().ready(function() {
   $('#sidebar-wrapper').height($('#main-wrapper').height());
});
</script >

To add this script fist identify the column-ids and paste just above </title> tag in html editor. If you are not sure how to check for id's you can use Firebug a very popular add-in for Firefox for the same. By just hovering specific HTML gets selected in it. See the image below:

See the live sample here

20 Comments:

Tessa said...

Hi,

I've tried both Amanda's trick and yours- can't get either one to work. Could you please explain exactly where this code should go?

AK said...

I think this is just because of customizations made in your existing template. You can try my "Simple Blue Theme" above mentioned feature is already there. If you want you may go through the XML source to see where and how jQuery logic as been placed. try below URL to get template

http://www.thetechhub.com/search/label/Blogger%20Template

Tessa said...

Could it have anything to do with a template being fluid? I recently changed it to fixed width in pixels. I'll try Amanda's hack again. Thanks anyway, I don't want to change my template. I do all changes without doing that as I got tired of widget trouble.

AK said...

Tessa .. It should not. My idea was just to switch temporarily to my template to check the issue. Anyways ... Let me know the blog name you are trying the script i'll try to find out the issue.

Tessa said...

Thanks, it's blossomsnblunders.blogspot.com

Anonymous said...

nice trick

FreeGPL said...

excellent trick. thank you

Moderator said...

Thank you this rocks! :P Awesome Thank you thank you!

Moderator said...
This comment has been removed by the author.
Debbie Shiamay said...

i tried all the codes possible i could find but yours worked so easily. THANK YOU

AK said...

Glad to know it worked for you :-)

Chris said...

Brilliant. Much appreciated.

Anonymous said...

hello!
i hope you can helo me..
at my blog layout, there are both parts equal.. but thats not what i want, i want the sidebar as short as the text in it
someone help?

netrepreneur said...

just what i was looking for! I have 3 columns though, and i have no idea what to repeat in the script so the main and two sidebars are all even. I've done the left sidebar already. Help? :)

AK said...

Mona

Not sure which layout you are using. Send your blog details then only i'll be able to tell.

AK said...

netrepreneur

Same trick applies to right sidebar. Get its id and make the height equal.

The Posh Box said...

I also need to know exactly what repeats in the script for the 3 columns.. can you please post one with three columns, just the script, please so that I can see how to repeat?

The Posh Box said...

Never mind... you have to place a second script with the new sidebar id..

aman said...

its fatnatstic trick.thanx u for shring,i will just going to try it.

popelix said...

This is the solution for my blogger-css nightmares!!! I just had to put the script before the /head tag to work.

Thanks :-)

Post a Comment