diff --git a/data/css/ancestortree.css b/data/css/ancestortree.css
index 2556cd2da..3a27b6b17 100644
--- a/data/css/ancestortree.css
+++ b/data/css/ancestortree.css
@@ -9,7 +9,7 @@
 # the Free Software Foundation; either version 2 of the License, or
 # (at your option) any later version.
 #
-# This program is distributed in the hope that it will be useful, 
+# This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
@@ -20,10 +20,10 @@
 #
 # $Id: $
 #
-**************************************************************************************************
+*******************************************************************************
 GRAMPS Cascading Style Sheet
 Style Name: Combined Ancestor Tree Style Sheet
-***************************************************************************************************
+*******************************************************************************
 #
 ===== Ancestor Graph Color Scheme =====
 Males       #BCEAF6
@@ -33,10 +33,8 @@ Unknown     #000
 ===== Web Graphics =====
 Males       Web_Gender_Male.png
 Females     Web_Gender_Female.png
-# ------------------------------------------------------------------------------------------------- */
-
-/* Subsections : Ancestors Tree
------------------------------------------------------ */
+# -------------------------------------------------------------------------- #
+/* Subsections : Ancestors Tree -------------------------------------------- */
 #tree {
     page-break-before:always;
     margin:0;
@@ -52,8 +50,8 @@ Females     Web_Gender_Female.png
 }
 #treeContainer div.boxbg {
     position:absolute;
-    margin:0;
-    padding:0;
+    margin:0px;
+    padding:0px;
     background:none;
 }
 #treeContainer div.boxbg a,
@@ -61,41 +59,43 @@ Females     Web_Gender_Female.png
     position:relative;
     z-index:10;
     display:block;
-    font:normal .7em/1.4em sans-serif;
+    font:normal 1.1em/1.4em sans-serif;
     text-align:center;
+    word-break:break-word;
+    word-wrap:break-word;
     text-decoration:none;
     color: #00029D;
-    width:118px;
-    padding:5px 20px 7px 20px;
+    width:280px;
+    min-height: 70px;
     margin-left:16px;
-    background-color: #FFF;
-    border: solid 1px #000;
+    border: solid 2px #000;
+    border-radius: 10px;
 }
 #treeContainer div.boxbg a.noThumb,
-#treeContainer div.AncCol3 a, 
-#treeContainer div.AncCol4 a, 
-#treeContainer div.AncCol3 span.unlinked, 
+#treeContainer div.AncCol4 a,
 #treeContainer div.AncCol4 span.unlinked {
     margin-top:10px;
+    float: right;
 }
 #treeContainer div.boxbg a:hover {
     position:relative;
     z-index:999;
-    font-size:1em;
+    font-size:1.3em;
+    word-break:break-word;
+    word-wrap:break-word;
     text-decoration:none;
     color: #00029D;
-    width:190px;
+    width:400px;
     margin-left:-20px;
-    padding:10px 25px 12px 25px;
-    border: solid 2px #000;
+    padding: 0px 0px 0px 40px;
 }
-#treeContainer div.boxbg a:hover, 
-#treeContainer div.AncCol3 a:hover, 
+#treeContainer div.boxbg a:hover,
 #treeContainer div.AncCol4 a:hover {
     margin-top:-44px;
 }
 #treeContainer div.boxbg a.noThumb:hover {
     margin-top:0;
+    padding-left: 10px;
 }
 #treeContainer div.AncCol0 a:hover {
     margin-left:12px;
@@ -105,48 +105,73 @@ Females     Web_Gender_Female.png
 }
 #treeContainer div.boxbg span.thumbnail {
     display:block;
-    max-width:80px;
-    max-height:65px;
-    margin:0 auto;
-    padding:4px 0;
+    position: absolute;
+    max-width:85px;
+    max-height:75px;
+    left: 3px;
+    top: 3px;
 }
-#treeContainer div.boxbg span.thumbnail img {
-    max-width:80px;
-    max-height:65px;
-    margin:0 auto;
+#treeContainer div.boxbg a.thumbnail table td.img {
+    padding-right: 5px;
 }
-#treeContainer div.boxbg a:hover span.thumbnail, #treeContainer div.boxbg a:hover span.thumbnail img {
-    height:80px;
+#treeContainer div.boxbg a.thumbnail:hover table td.img {
+    padding-right: 9px;
 }
-#treeContainer div.AncCol3 span.thumbnail, #treeContainer div.AncCol4 span.thumbnail {
+#treeContainer div.boxbg a.thumbnail table td.name {
+    padding-top:3px;
+    padding-left: 2px;
+    padding-right: 23px;
+    width: 90%;
+}
+#treeContainer div.boxbg a.thumbnail img {
+    margin-left:0px;
+    padding-left: 0px;
+    border-radius: 5px;
+}
+#treeContainer div.boxbg a.thumbnail:hover img {
+    max-height:90%;
+    margin-left:5px;
+    position: absolute;
+    left: 0px;
+    top: 4px;
+    border-radius: 5px;
+}
+#treeContainer div.boxbg table td:first-child, table th:first-child {
+    padding-left: 5px;
+    padding-top: 5px;
+}
+#IndividualDetail div.subsection table tr td:first-child {
+    padding-left: 5px;
+    padding-top: 5px;
+}
+#treeContainer #treeContainer div.AncCol4 span.thumbnail {
     display:none;
 }
 #treeContainer div.boxbg a:hover span.thumbnail {
     display:block;
 }
-
 #treeContainer div.boxbg span.fullname {
     display: none;
 }
-
 #treeContainer div.boxbg span.shortname {
     display: inline;
 }
-
 #treeContainer div.boxbg a:hover span.fullname {
     display: inline;
 }
-
 #treeContainer div.boxbg a:hover span.shortname {
     display: none;
 }
-
-
+#treeContainer div.boxbg a:hover {
+    float: right;
+    margin-top: 10px;
+    border: solid 4px #000;
+}
 #treeContainer div.male a,
 #treeContainer div.male span.unlinked {
     background:url(../images/Web_Gender_Male.png) #BCEAF6 no-repeat top right;
 }
-#treeContainer div.female a, 
+#treeContainer div.female a,
 #treeContainer div.female span.unlinked {
     background:url(../images/Web_Gender_Female.png) #FFC0CB no-repeat top right;
 }
diff --git a/gramps/plugins/webreport/buchheim.py b/gramps/plugins/webreport/buchheim.py
index b9d61d16a..43d704bbe 100644
--- a/gramps/plugins/webreport/buchheim.py
+++ b/gramps/plugins/webreport/buchheim.py
@@ -132,7 +132,6 @@ class DrawTree(object):
         """
         return self.tree.handle
 
-
 def buchheim(tree, node_width, h_separation, node_height, v_separation):
     """
     Calculate the position of elements of the graph given a minimum
@@ -142,9 +141,30 @@ def buchheim(tree, node_width, h_separation, node_height, v_separation):
     min_x = second_walk(draw_tree, 0, node_width+h_separation, 0)
     if min_x < 0:
         third_walk(draw_tree, 0 - min_x)
+    top = get_min_coord_y(draw_tree)
+    height = get_max_coord_y(draw_tree)
 
-    return draw_tree
+    return (draw_tree, top, height)
 
+def get_min_coord_y(tree, min_value=100.0):
+    """ Get the minimum coord_y """
+    if tree.coord_y < min_value:
+        min_value = tree.coord_y
+    for child in tree.children:
+        min_v = get_min_coord_y(child, min_value)
+        if min_value > min_v:
+            min_value = min_v
+    return min_value
+
+def get_max_coord_y(tree, max_value=0.0):
+    """ Get the maximum coord_y """
+    if tree.coord_y > max_value:
+        max_value = tree.coord_y
+    for child in tree.children:
+        max_v = get_max_coord_y(child, max_value)
+        if max_value < max_v:
+            max_value = max_v
+    return max_value
 
 def third_walk(tree, adjust):
     """
@@ -156,7 +176,6 @@ def third_walk(tree, adjust):
     for child in tree.children:
         third_walk(child, adjust)
 
-
 def firstwalk(tree, node_height, v_separation):
     """
     Determine horizontal positions.
@@ -189,7 +208,6 @@ def firstwalk(tree, node_height, v_separation):
     tree.height = max(tree.height, tree.coord_y)
     return tree
 
-
 def apportion(tree, default_ancestor, v_separation):
     """
     Figure out relative positions of node in a tree.
@@ -263,7 +281,6 @@ def execute_shifts(tree):
         child.height = max(child.height, child.coord_y)
         tree.height = max(tree.height, child.height)
 
-
 def ancestor(vil, tree, default_ancestor):
     """
     The relevant text is at the bottom of page 7 of
diff --git a/gramps/plugins/webreport/person.py b/gramps/plugins/webreport/person.py
index 4d8ad2746..eb63b74fa 100644
--- a/gramps/plugins/webreport/person.py
+++ b/gramps/plugins/webreport/person.py
@@ -84,8 +84,8 @@ _ = glocale.translation.sgettext
 LOG = logging.getLogger(".NarrativeWeb")
 getcontext().prec = 8
 
-_WIDTH = 160
-_HEIGHT = 120
+_WIDTH = 280
+_HEIGHT = 140
 _VGAP = 10
 _HGAP = 30
 _SHADOW = 5
@@ -1020,15 +1020,20 @@ class PersonPages(BasePage):
                 death = self.rlocale.get_date(dd_event.get_date_object())
             if death == "":
                 death = "..."
-            value = person_name + "<br/>*", birth, "<br/>+", death
+            value = person_name + "<br/>*"+ birth+ "<br/>+"+ death
+            tdval = Html("td", value, class_="name")
+            table = Html("table", class_="table")
             if thumbnail_url is None:
                 boxbg += Html("a", href=url, class_="noThumb") + value
             else:
-                thumb = Html("span", class_="thumbnail") + (
-                    Html("img", src=thumbnail_url, alt="Image: " + person_name))
-                boxbg += Html("a", href=url) + thumb + value
+                trow = Html("tr")
+                img = Html("img", src=thumbnail_url, alt="Img: " + person_name)
+                trow += Html("td", img, class_="img")
+                trow += tdval
+                table += trow
+                boxbg += Html("a", table, href=url, class_="thumbnail")
         shadow = Html(
-            "div", class_="shadow", inline=True,
+            "div", "", class_="shadow", inline=True,
             style="top: %dpx; left: %dpx;" % (top + _SHADOW, xoff + _SHADOW))
 
         return [boxbg, shadow]
@@ -1175,16 +1180,18 @@ class PersonPages(BasePage):
 
         # We now apply the Buchheim algorith to this tree, and it assigns X
         # and Y positions to all elements in the tree.
-        l_tree = buchheim(layout_tree, _WIDTH, _HGAP, _HEIGHT, _VGAP)
+        l_tree, top, height = buchheim(layout_tree, _WIDTH, _HGAP,
+                                       _HEIGHT, _VGAP)
 
+        top = abs(top)
         # We know the height in 'pixels' where every Ancestor will sit
         # precisely on an integer unit boundary.
         with Html("div", id="tree", class_="subsection") as tree:
             tree += Html("h4", _('Ancestors'), inline=True)
             with Html("div", id="treeContainer",
-                      style="width:%dpx; height:%dpx;" % (
-                          l_tree.width + _XOFFSET + _WIDTH,
-                          l_tree.height + _HEIGHT + _VGAP)
+                      style="width:%dpx; height:%dpx; top: %dpx" % (
+                          l_tree.width + _XOFFSET* (generations + 1) + _WIDTH,
+                          height + top + _HEIGHT + _VGAP, top)
                      ) as container:
                 tree += container
                 container += self.draw_tree(l_tree, 1, None)