Making the Sidebar and the Post Area to be of Same Height

Some of the simple blogger templates use CSS to set the background color of the sidebar and the main post part.In this case,the heights of these two columns can be different making it look a little awkward.In many cases you may want to make both of these columns of the same height.

If you didn't understand what i am talking of,then i will show you some demos.

Check out the sidebars of both

Blog Without Height Fixing – Link

Blog After Height Fixing – Link

The height adjustment can be done using a very simple javascript code.Actually i had to make something like this for another site of mine.So i thought of sharing this with you guys,

Here is the height fixing script.

<!--Height Fixer Starts-->
&lt;script type=&#39;text/javascript&#39;&gt;
&lt;!--
onload=function() {

var mh = document.getElementById(&#39;main-wrapper&#39;).offsetHeight;
var sh = document.getElementById(&#39;sidebar-wrapper&#39;).offsetHeight;
if(sh&gt;mh) mh=sh;
document.getElementById(&#39;main-wrapper&#39;).style.height = document.getElementById(&#39;sidebar-wrapper&#39;).style.height = mh+ &#39;px&#39;
 }
//--&gt;
&lt;/script&gt;
<!--Height Fixer Ends-->

What does this height fixer do?

When the page is fully loaded,this javascript code will get executed(as we have used onload). Now the variable mh will get the value of the height of the div with id main-wrapper.The variable sh will get the value of the height of the div with id sidebar-wrapper,Next we make a check.We check if sh is greater than mh.The greater of these values will be assigned to the variable mh

Now we set the height of both the divs[div with id sidebar-wrapper and the div with id main-wrapper]  as sh pixels. So what does this actually do?? This script checks which of these divs have a larger height and assigns that larger height to both of these divs thus making both of them of equal height.

Where to place this height Fixer Code?

The height fixer code can be placed anywhere in the head section of your template.If you are still confused about where to place the code,then place it just above

</head>

Where else Can i Use this Script?

This script can be used anywhere where you need to adjust the height of two divisions(divs) to be the same.In that case don’t forget to change main-wrapper and sidebar-wrapper in this script with the respective ids of those divs.That means you can use this script to adjust the height of any two columns and make them of same height.

Why is the script having so many complex characters like &lt; &gt; etc?.

This is a parsed javascript.Blogger has problems with normal javascript(you might know this if you have tried to add the adsense code into the template).

Does this work on All Browsers?

This is a a very simple javascript code and it will work on all browsers.

Your comments and suggestions are always welcome.

24 comments :

  1. Thanks for the tip.I used it to fix the heights of my footer boxes.

    ReplyDelete
  2. Hello Aneesh,

    I am using three columner template and this hack is not working for me.

    Any suggestions....???

    I used it here, but it does not seem to work http://experienceswithshirdisaibaba.blogspot.com/

    ReplyDelete
  3. The background color of your main wrapper and both the sidebars is the sam(white). So even if the height fix works,you wont be visually able to see any chabe..
    By the way you have modified the script but not properly..
    You will have to use a third variable for holding the height of the new-sidebar-wrapper
    and you will have to compare these 3 heights and find which is the larger one..
    And in that statement you are setting the height of the main-wrapper and the sidebar-wrapper only
    you will have to include the newsidebar-wrapper also!! an by the way as i said you wont see anychanges.. If you need to see some changes,then you have to set some non-white background colors for the sidebar-wrapper and the new-sidebarwrapper..

    Hope you got what i am talking of!!

    ReplyDelete
  4. Hello Aneesh,

    I included newsidebar-wrapper too. But dont know where it went wrong :(

    I got ur point to certain extent. Still i am afraid i can do it myself.

    Can u help me in doing these two things :

    1. Changing background colour of sidebars.

    2. Give me exact code which i need to use this script in three columner template.

    Actually i needed such adjustments badly since write ups of few of my blogs are lengthy ones.

    Thanks in advance

    ReplyDelete
  5. if you want to change the background color of the sidebar-wrapper then find
    #sidebar-wrapper
    then within the {},you will find something like
    background: colorcode; or background-color:colorcode;
    you can change that color code to change the background..

    Similar is the case with main-wrapper and newsidebar-wrapper

    Color codes are hexvalues like #ffffff It can also take values like red,yellow,green etc..So i hope you know how to change the background color of main-wrapper,sidebar-wrapper and newsidebar-wrapper

    and like i said earlier,you are assigning the height of the sidebar-wrapper to sh.Then you over write it by assigning the height of newsidebar-wrapper also to the same sh.That is what i said earlier.So you will need a 3rd variable with another name say nsh so that
    sh=height of sidebar
    mh=height of main wrapper
    nsh=height of new sidebar
    Now we want to compare which of these values is greater..(mh,sh or nsh)
    ie if(sh>mh) mh=sh
    if(nsh>mh) mh=nsh
    After this mh will have the largest height value..
    Now we must set all 3 heights using

    document.getElementById('main-wrapper').style.height
    document.getElementById('sidebar-wrapper').style.height
    document.getElementById('newsidebar-wrapper').style.height
    Assign all of these to mh +'px'

    ReplyDelete
  6. and if you need the exact codes,contact me at the forums.. this commment form doesn't allow me to post code properly!!

    ReplyDelete
  7. Wow, great! Thanks.

    But there is a problem: my content column has looses its bottom rounded left borders.

    Here is the page: http://brujacm.blogspot.com/

    ReplyDelete
  8. i don't see any bottom left rounded corners for your blog.may be because you edited the template sometime back..
    there are two lines in your template like
    -moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;
    change one of them to
    -moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;

    and you will get the bottom left border.Its not the problem of the javascript.Its the prob with your template. :)

    ReplyDelete
  9. hehe... excuse me, I thought it was working properly before the javascript. But you're right, it was a problem of the template.

    Thanks again!

    ReplyDelete
  10. Wow, FINALLY an equal-column-heights script that works! I've been looking for this for a very long time. Thankyouuuuu!!! =)

    ReplyDelete
  11. Thank you so much! I love your profession!

    ReplyDelete
  12. Hi aneesh,

    I did this for the three column footer in my blog and it works perfectly except that my muli-tabbed sidebar disappears. How do I fix this? check out www.cheapeststocktradingstrategies.com

    terence

    ReplyDelete
  13. Hi ANEESH nice work! but it is not working in my blog :( . can u plz check. And there is one problem that whenever i try to open any post the sidebar disappear from left and appear @ the end.
    my blog is http://manmohan7.blogspot.com

    ReplyDelete
  14. Hi MANMOHAN MEHTA,
    replace main-wrapper with content
    and sidebar-wrapper with sidebar2
    at your Height Fixer code..
    sure it will work..

    ReplyDelete
  15. need ur help man!!!
    actually im using a gamezine template and wanted a (Featured Content, Popular Posts, Stay Connected, Resources and Tools, Other Sites to Enjoy, Recent Comments. )section @bottom of my blog same as the below mentioned site :

    (http://widgetsforfree.blogspot.com)

    my blog url: http://royalenfieldmotorcycles.blogspot.com

    thanx a ton man!!!

    ReplyDelete
  16. ~first, sorry for my english...
    --------
    I've another way to making the sidebar and the post area to be of Same Height.

    The best way is to make the Content Field with CSS that have same width with outer wrapper (include Margin and Padding, too) and put the background as images with repeat-y function.

    I hope you understand. lol.

    ReplyDelete
  17. Hi,

    I'm using the Neosapien template and this doesnt seem to work. Can you advise? I was going to look at the css but this script is an awesome fix.

    Template http://btemplates.com/2008/blogger-template-neosapien/

    ReplyDelete
  18. hello!
    I hope someone can help me. :(
    I already have this fixed sidebar! but I want it to stop when my widget stops, so, like your blog was BEFORE fixing.
    I dont know what to change anymore.
    someone help me? :(

    http://yumizu-chan.blogspot.com/

    ReplyDelete
  19. Thank you! Just what I needed. :D

    ReplyDelete
  20. This is absolutely great!!!

    Thanks a lot!

    ReplyDelete