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:
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?
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
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.
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.
Thanks, it's blossomsnblunders.blogspot.com
nice trick
excellent trick. thank you
Thank you this rocks! :P Awesome Thank you thank you!
i tried all the codes possible i could find but yours worked so easily. THANK YOU
Glad to know it worked for you :-)
Brilliant. Much appreciated.
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?
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? :)
Mona
Not sure which layout you are using. Send your blog details then only i'll be able to tell.
netrepreneur
Same trick applies to right sidebar. Get its id and make the height equal.
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?
Never mind... you have to place a second script with the new sidebar id..
its fatnatstic trick.thanx u for shring,i will just going to try it.
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