diff --git a/ganttzk/src/main/resources/web/ganttz/zul/plannerLayout.zul b/ganttzk/src/main/resources/web/ganttz/zul/plannerLayout.zul
index 2e0da4272..f273e9f48 100644
--- a/ganttzk/src/main/resources/web/ganttz/zul/plannerLayout.zul
+++ b/ganttzk/src/main/resources/web/ganttz/zul/plannerLayout.zul
@@ -1,5 +1,5 @@
 <zk xmlns:n="http://www.zkoss.org/2005/zk/native">
-    <borderlayout height="600px" width="auto">
+    <borderlayout sclass="plannerlayout" width="auto">
        <north height="30px" border="0">
        <hbox align="center">
         <button label="Save" />
@@ -29,7 +29,7 @@
        </north>
 
         <center border="0">
-            <borderlayout sclass="plannerlayout">
+            <borderlayout sclass="plannerlayout_center">
                 <west size="300px" flex="true" collapsible="true"
                     splittable="true" autoscroll="true">
 
@@ -45,7 +45,7 @@
 
                             </vbox>
                         </north>
-                        <center border="0">
+                        <center border="0" style="overflow-x:scroll">
                             <div sclass="leftpanelgap" id="insertionPointLeftPanel"></div>
                         </center>
                     </borderlayout>
@@ -62,9 +62,9 @@
                 </center>
             </borderlayout>
         </center>
-        <south height="20%" collapsible="true" splittable="true">
+        <south height="100px" collapsible="true" splittable="true">
             <borderlayout>
-                <west size="200px" flex="true" collapsible="true"
+                <west width="200px" flex="true" collapsible="true"
                     splittable="true">
                     <vbox pack="center" align="center">
                     <label value="ResourcesLoadGraph details"
@@ -112,7 +112,7 @@ catmodel.setValue("2011", "Q3 2009", new Integer(70));
 catmodel.setValue("2011", "Q4 2009", new Integer(90));
 
 </zscript>
-	<chart id="barchart" width="1600" height="250"
+	<chart id="barchart" width="1600px" height="175px"
 		type="stacked_area" fgAlpha="128" />
 	<zscript>
   barchart.setModel(catmodel);
diff --git a/ganttzk/src/main/resources/web/ganttz/zul/resourcesLoadLayout.zul b/ganttzk/src/main/resources/web/ganttz/zul/resourcesLoadLayout.zul
index 95a6643f6..c00da338c 100644
--- a/ganttzk/src/main/resources/web/ganttz/zul/resourcesLoadLayout.zul
+++ b/ganttzk/src/main/resources/web/ganttz/zul/resourcesLoadLayout.zul
@@ -20,7 +20,7 @@
 
 <zk xmlns:n="http://www.zkoss.org/2005/zk/native">
 
-    <borderlayout height="600px" width="auto">
+    <borderlayout sclass="resourcesloadlayout" width="auto">
        <north height="30px" border="0">
        <hbox align="center">
         <button label="Save" />
@@ -65,7 +65,7 @@
 
                             </vbox>
                         </north>
-                        <center border="0">
+                        <center border="0" style="overflow-x:scroll">
                             <div sclass="leftpanelgap" id="insertionPointLeftPanel"></div>
                         </center>
                     </borderlayout>
@@ -132,7 +132,7 @@ catmodel.setValue("2011", "Q3 2009", new Integer(70));
 catmodel.setValue("2011", "Q4 2009", new Integer(90));
 
 </zscript>
-	<chart id="barchart" title="Resources load Sample" width="1600" height="250"
+	<chart id="barchart" width="1600px" height="175px"
 		type="stacked_area" fgAlpha="128" />
 	<zscript>
   barchart.setModel(catmodel);
diff --git a/ganttzk/src/main/resources/web/js/ganttz/resourceload/resourcesloadlist.js b/ganttzk/src/main/resources/web/js/ganttz/resourceload/resourcesloadlist.js
index c8e0824f9..6dbcdab40 100644
--- a/ganttzk/src/main/resources/web/js/ganttz/resourceload/resourcesloadlist.js
+++ b/ganttzk/src/main/resources/web/js/ganttz/resourceload/resourcesloadlist.js
@@ -59,10 +59,7 @@ function addResourcesLoadListMethods(object) {
 	};
 
 	function listenToScroll() {
-		var onHorizontalScroll = function() {
-			alert('horizontalscroll');
-		};
-		var onVerticalScroll = function() {
+		var onScroll = function() {
 			var scrolledpannel = YAHOO.util.Selector
 					.query('.rightpanellayout div')[0];
 			elem = YAHOO.util.Selector.query('.timetrackergap')[0];
@@ -74,7 +71,7 @@ function addResourcesLoadListMethods(object) {
 			leftpanel.style["top"] = "-" + scrolledpannel.scrollTop + "px";
 		};
 
-		YAHOO.util.Selector.query('.rightpanellayout div')[0].onscroll = onVerticalScroll;
+		YAHOO.util.Selector.query('.rightpanellayout div')[0].onscroll = onScroll;
 
 	}
 
diff --git a/ganttzk/src/main/resources/web/js/ganttz/tasklist.js b/ganttzk/src/main/resources/web/js/ganttz/tasklist.js
index d087c40e9..31dab18dd 100644
--- a/ganttzk/src/main/resources/web/js/ganttz/tasklist.js
+++ b/ganttzk/src/main/resources/web/js/ganttz/tasklist.js
@@ -45,9 +45,8 @@ SCROLLBAR_WIDTH = 15; // Scrollbars default width
 
 zkTasklist.init = function(cmp) {
 	zkTasklist.adjust_height();
-	// make_visible();
 	// relocateScrolls();
-	// listenToScroll();
+	listenToScroll();
 }
 
 /* Resizes ganttpanel heigh to fit window size */
@@ -57,26 +56,27 @@ zkTasklist.adjust_height = function(cmp) {
 	adjustScrollableDimensions();
 }
 
-/* Listener for javascript scrolling to implement optimal synchronization */
+/* Scrolls taskdetails compoent when scrolling ganttpanel component */
 function listenToScroll() {
-	var onHorizontalScroll = function() {
-		var scroller = document.getElementById('ganttpanel_scroller_x');
-		document.getElementById('timetracker').scrollLeft = scroller.scrollLeft;
-		document.getElementById('scroll_container').scrollLeft = scroller.scrollLeft;
-		document.getElementById('zoom_buttons').style["left"] = scroller.scrollLeft
-				+ "px";
+	var onScroll = function() {
+		var scrolledpannel = YAHOO.util.Selector
+				.query('.rightpanellayout div')[0];
+		elem = YAHOO.util.Selector.query('.timetrackergap')[0];
+		elem.style["position"] = "relative";
+		elem.style["left"] = "-" + scrolledpannel.scrollLeft + "px";
+
+		var leftpanel = YAHOO.util.Selector.query('.leftpanelgap')[0];
+		leftpanel.style["position"] = "relative";
+		leftpanel.style["top"] = "-" + scrolledpannel.scrollTop + "px";
 	};
-	var onVerticalScroll = function() {
-		var offset = document.getElementById('ganttpanel_scroller_y').scrollTop;
-		document.getElementById('listdetails_container').scrollTop = offset;
-		document.getElementById('scroll_container').scrollTop = offset;
-	};
-	document.getElementById('ganttpanel_scroller_x').onscroll = onHorizontalScroll;
-	document.getElementById('ganttpanel_scroller_y').onscroll = onVerticalScroll;
-	// TODO listen to container onwheel scroll move
+
+	YAHOO.util.Selector.query('.rightpanellayout div')[0].onscroll = onScroll;
+
 }
 
-YAHOO.util.Event.addListener(window, 'resize', relocateScrolls);
+// Improve adjusting plannerlayout_center height based on window size */
+// YAHOO.util.Event.addListener(window, 'resize', relocateScrolls);
+
 /*
  * Move scrollbars to locate them on left and bottom window borders
  */
@@ -148,14 +148,6 @@ function adjustScrollableDimensions() {
 			+ "px";
 }
 
-/*
- * Makes javascript-handled scrollbars visible after the page is loaded to avoid
- * relocation effect when the task list composition is finished
- */
-function make_visible() {
-	document.getElementById('ganttpanel_scroller_x').style["display"] = "inline";
-	document.getElementById('ganttpanel_scroller_y').style["display"] = "inline";
-}
 
 /**
  *
diff --git a/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css b/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css
index 0804ba38a..6bae4d561 100644
--- a/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css
+++ b/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css
@@ -89,6 +89,14 @@ zkTasklist.GANTT_PANEL_LEFT = 300
     width: 64px;
 }
 
+.listdetails {
+min-width:200px;
+}
+
+.listdetails div.z-tree-header th.z-tree-col {
+    overflow:visible;
+}
+
 .taskdetail_grid table {
     height: 30px;
     width: 285px; /* Ganntz.ListdetailsWidth */
@@ -473,17 +481,14 @@ tr.z-vbox-sep {
 
 .resourceloadleftpane .z-tree-body {
     z-index: -10;
-    overflow: hidden;
 }
 
 .leftpanelgap .z-tree-body {
     z-index: 2;
-    overflow: hidden;
 }
 
 .leftpanelgap .z-tree-header {
     z-index: 16;
-    overflow: hidden;
 }
 
 .leftpanelgap .resourceloadleftpane {
@@ -507,6 +512,14 @@ tr.z-vbox-sep {
     padding: 0px;
 }
 
+div.z-tree {
+    overflow:visible;
+}
+
 .listdetails td {
     border-bottom: 1px dotted #86A4BE !important;
+}
+
+.plannerlayout, .resourcesloadlayout {
+    height:500px;
 }
\ No newline at end of file