diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js
index 37ae7497e..47ca46bb0 100644
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/src/diagrams/gantt/ganttRenderer.js
@@ -10,7 +10,8 @@ var conf = {
     barHeight: 20,
     barGap: 4,
     topPadding: 50,
-    sidePadding: 75,
+    rightPadding: 75,
+    leftPadding: 75,
     gridLineStartPadding: 35,
     fontSize: 11,
     fontFamily: '"Open-Sans", "sans-serif"'
@@ -68,7 +69,7 @@ module.exports.draw = function (text, id) {
             d3.max(taskArray, function (d) {
                 return d.endTime;
             })])
-        .rangeRound([0, w - 150]);
+        .rangeRound([0, w - conf.leftPadding - conf.rightPadding]);
         //.nice(d3.time.monday);
 
     var categories = [];
@@ -102,17 +103,17 @@ module.exports.draw = function (text, id) {
         var barHeight = conf.barHeight;
         var gap = barHeight + conf.barGap;
         var topPadding = conf.topPadding;
-        var sidePadding = conf.sidePadding;
+        var leftPadding = conf.leftPadding;
 
         var colorScale = d3.scale.linear()
             .domain([0, categories.length])
             .range(['#00B9FA', '#F95002'])
             .interpolate(d3.interpolateHcl);
 
-        makeGrid(sidePadding, topPadding, pageWidth, pageHeight);
-        drawRects(tasks, gap, topPadding, sidePadding, barHeight, colorScale, pageWidth, pageHeight);
-        vertLabels(gap, topPadding, sidePadding, barHeight, colorScale);
-        drawToday(sidePadding, topPadding, pageWidth, pageHeight);
+        makeGrid(leftPadding, topPadding, pageWidth, pageHeight);
+        drawRects(tasks, gap, topPadding, leftPadding, barHeight, colorScale, pageWidth, pageHeight);
+        vertLabels(gap, topPadding, leftPadding, barHeight, colorScale);
+        drawToday(leftPadding, topPadding, pageWidth, pageHeight);
 
     }
 
@@ -129,7 +130,7 @@ module.exports.draw = function (text, id) {
                 return i * theGap + theTopPad - 2;
             })
             .attr('width', function () {
-                return w - theSidePad / 2;
+                return w - conf.rightPadding / 2;
             })
             .attr('height', theGap)
             .attr('class', function (d) { //eslint-disable-line no-unused-vars
@@ -211,7 +212,7 @@ module.exports.draw = function (text, id) {
 
                 // Check id text width > width of rectangle
                 if (textWidth > (endX - startX)) {
-                    if (endX + textWidth  + 1.5*conf.sidePadding> w) {
+                    if (endX + textWidth  + 1.5*conf.leftPadding> w) {
                         return startX + theSidePad - 5;
                     } else {
                         return endX + theSidePad + 5;
@@ -259,7 +260,7 @@ module.exports.draw = function (text, id) {
 
                 // Check id text width > width of rectangle
                 if (textWidth > (endX - startX)) {
-                    if (endX + textWidth + 1.5*conf.sidePadding > w) {
+                    if (endX + textWidth + 1.5*conf.leftPadding > w) {
                         return 'taskTextOutsideLeft taskTextOutside' + secNum + ' ' + taskType;
                     } else {
                         return 'taskTextOutsideRight taskTextOutside' + secNum+ ' ' + taskType;
@@ -424,4 +425,4 @@ module.exports.draw = function (text, id) {
     function getCount(word, arr) {
         return getCounts(arr)[word] || 0;
     }
-};
\ No newline at end of file
+};
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 95b217c9f..daecff9a7 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -187,9 +187,9 @@ var config = {
         topPadding: 50,
 
         /**
-         *  **sidePadding** - the space allocated for the section name to the left of the activities.
+         *  **leftPadding** - the space allocated for the section name to the left of the activities.
          */
-        sidePadding: 75,
+        leftPadding: 75,
 
         /**
          *  **gridLineStartPadding** - Vertical starting position of the grid lines
diff --git a/test/examples/ganttSideSpan.html b/test/examples/ganttSideSpan.html
new file mode 100644
index 000000000..3b9cefcb7
--- /dev/null
+++ b/test/examples/ganttSideSpan.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+
+    <link rel="stylesheet" href="dist/mermaid.css"/>
+
+    <script src="dist/mermaid.js"></script>
+    <script>
+        mermaid.initialize({
+            gantt: {
+                leftPadding: 400
+            }
+        });
+    </script>
+</head>
+<body>
+    <div class="mermaid" id="i211">
+        gantt
+            dateFormat YYYY-MM-DD
+            title My Project
+
+            section Long Long Long Long Task Name
+            Completed task  :done,      des1, 2016-04-25, 2016-05-21
+            Active task     :active,    des1, 2016-04-25, 2016-04-30
+            Future task     :           des1, 2016-04-25, 2016-05-30
+    </div>
+</body>
+</html>
diff --git a/test/gantt.html b/test/gantt.html
index 552f12cfd..ce511918a 100644
--- a/test/gantt.html
+++ b/test/gantt.html
@@ -12,7 +12,7 @@
                     barHeight:20,
                     barGap:4,
                     topPadding:50,
-                    sidePadding:75,
+                    leftPadding:75,
                     gridLineStartPadding:5,
                     fontSize:11,
                     numberSectionStyles:3,
diff --git a/test/gconf.json b/test/gconf.json
index 4c2e0368b..a4e7f23ec 100644
--- a/test/gconf.json
+++ b/test/gconf.json
@@ -3,8 +3,8 @@
   "barHeight":20,
   "barGap":4,
   "topPadding":50,
-  "sidePadding":75,
+  "leftPadding":75,
   "gridLineStartPadding":35,
   "fontSize":11,
   "numberSectionStyles":3
-}
\ No newline at end of file
+}
diff --git a/test/mix-dark-theme.html b/test/mix-dark-theme.html
index 71cdf0823..2b60d47b2 100644
--- a/test/mix-dark-theme.html
+++ b/test/mix-dark-theme.html
@@ -25,7 +25,7 @@
             barHeight:20,
             barGap:4,
             topPadding:50,
-            sidePadding:100,
+            leftPadding:100,
             gridLineStartPadding:35,
             fontSize:11,
             numberSectionStyles:4,
diff --git a/test/mix.html b/test/mix.html
index 9cd17f34c..5b475e789 100644
--- a/test/mix.html
+++ b/test/mix.html
@@ -25,7 +25,7 @@
             barHeight:20,
             barGap:4,
             topPadding:50,
-            sidePadding:100,
+            leftPadding:100,
             gridLineStartPadding:35,
             fontSize:11,
             numberSectionStyles:4,
diff --git a/test/web_render.html b/test/web_render.html
index d7b21104a..f9f04aed2 100644
--- a/test/web_render.html
+++ b/test/web_render.html
@@ -24,7 +24,7 @@ html {
             barHeight:20,
             barGap:4,
             topPadding:50,
-            sidePadding:75,
+            leftPadding:75,
             gridLineStartPadding:35,
             fontSize:11,
             numberSectionStyles:3,