2 Sidebar Same Height as Main

Original post at http://easyblogtrick.blogspot.com

If you use templates with 2 sidebar (left and right) with main body at middle, maybe you have a problem about the height because they are not have a same height.

This is the trick to make they have a same height:

First, you must note and adjust this elements with your templates:
* Main-wrapper, is your main-wrapper id. usually written #main-wrapper, a place where you post the article.
* Sidebar-wrapper, this is your first sidebar id. Can place at left or right. Usually written #sidebar-wrapper.
* Sidebar2-wrapper, your second sidebar id. usually written #sidebar2-wrappers.
* Content-wrapper, is where all of element (main, sidebar1 and sidebar2) is located. Usually written #content-wrappers.

Copy code below :

<script type='text/javascript'>
function Sama_Tinggi(){
var mainwrapper = document.getElementById("main-wrapper");
var sidebarwrapper = document.getElementById("sidebar-wrapper");
var sidebar2wrapper = document.getElementById("sidebar2-wrapper");
var content = document.getElementById("content-wrapper");


Tinggimainwrapper = mainwrapper.offsetHeight;
Tinggisidebarwrapper = sidebarwrapper.offsetHeight;
Tinggisidebar2wrapper = sidebar2wrapper.offsetHeight;
Tinggicontent = content.offsetHeight;

TinggiSisa = Tinggicontent - Tinggimainwrapper;
TinggiSisa2 = Tinggicontent - Tinggisidebarwrapper;
TinggiSisa3 = Tinggicontent - Tinggisidebar2wrapper;

mainwrapper.style.paddingBottom = TinggiSisa + "px";
sidebarwrapper.style.paddingBottom = TinggiSisa2 + "px";
sidebar2wrapper.style.paddingBottom = TinggiSisa3 + "px";
}
</script>


Paste above code </head>

Then change code <body> become:
<body onload='Sama_Tinggi()'>

Save your templates and then preview. Now both of your sidebar be same height with your main body!!

Enjoy it..

1 comment:

  1. hi friend, i have follow your blog, follow me back.. please.

    create a comment to support me in the contest here: http://maininternetonline.blogspot.com/2009/05/blogger-kontes-review-blogspot-template.html

    thanks.

    ReplyDelete

Please leave a comment if something wrong with template. Thanks