Update tests for the CSS changes

12 files changed, 717 insertions, 576 deletions

diff --git a/html-test/ref/Bug26.html b/html-test/ref/Bug26.html
index 981370fa..c670264c 100644
--- a/html-test/ref/Bug26.html
+++ b/html-test/ref/Bug26.html
@@ -145,10 +145,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug26.html");};
 	    ><div id="section.i:C" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >C</a
-		    > ()</td
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >C</a
+		      > ()</span
+		    ></td
 		  ><td class="doc"
 		  ><p
 		    >instance for ()</p
@@ -168,7 +170,7 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug26.html");};
     ><p
       >Produced by <a href=""
 	>Haddock</a
-	> version 2.15.1</p
+	> version 2.16.1</p
       ></div
     ></body
   ></html
diff --git a/html-test/ref/Bug294.html b/html-test/ref/Bug294.html
index 103fbed9..e1022f32 100644
--- a/html-test/ref/Bug294.html
+++ b/html-test/ref/Bug294.html
@@ -57,31 +57,35 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug294.html");};
 	    ><div id="section.i:A" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >DP</a
-		    > <a href=""
-		    >A</a
-		    > = <a name="v:ProblemCtor-39-" class="def"
-		    >ProblemCtor'</a
-		    > <a href=""
-		    >A</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >DP</a
+		      > <a href=""
+		      >A</a
+		      > = <a name="v:ProblemCtor-39-" class="def"
+		      >ProblemCtor'</a
+		      > <a href=""
+		      >A</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > TP <a href=""
-		    >A</a
-		    > = <a name="v:ProblemCtor" class="def"
-		    >ProblemCtor</a
-		    > <a href=""
-		    >A</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > TP <a href=""
+		      >A</a
+		      > = <a name="v:ProblemCtor" class="def"
+		      >ProblemCtor</a
+		      > <a href=""
+		      >A</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
@@ -133,17 +137,19 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug294.html");};
 	    ><div id="section.i:DP" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >DP</a
-		    > <a href=""
-		    >A</a
-		    > = <a name="v:ProblemCtor-39-" class="def"
-		    >ProblemCtor'</a
-		    > <a href=""
-		    >A</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >DP</a
+		      > <a href=""
+		      >A</a
+		      > = <a name="v:ProblemCtor-39-" class="def"
+		      >ProblemCtor'</a
+		      > <a href=""
+		      >A</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
@@ -158,7 +164,7 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug294.html");};
     ><p
       >Produced by <a href=""
 	>Haddock</a
-	> version 2.15.0</p
+	> version 2.16.1</p
       ></div
     ></body
   ></html
diff --git a/html-test/ref/Bug7.html b/html-test/ref/Bug7.html
index c6fe445b..cea6d150 100644
--- a/html-test/ref/Bug7.html
+++ b/html-test/ref/Bug7.html
@@ -104,13 +104,15 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug7.html");};
 	    ><div id="section.i:Foo" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >Bar</a
-		    > <a href=""
-		    >Foo</a
-		    > <a href=""
-		    >Foo</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Bar</a
+		      > <a href=""
+		      >Foo</a
+		      > <a href=""
+		      >Foo</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -138,13 +140,15 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug7.html");};
 	    ><div id="section.i:Bar" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >Bar</a
-		    > <a href=""
-		    >Foo</a
-		    > <a href=""
-		    >Foo</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Bar</a
+		      > <a href=""
+		      >Foo</a
+		      > <a href=""
+		      >Foo</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -161,7 +165,7 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug7.html");};
     ><p
       >Produced by <a href=""
 	>Haddock</a
-	> version 2.15.0</p
+	> version 2.16.1</p
       ></div
     ></body
   ></html
diff --git a/html-test/ref/Hash.html b/html-test/ref/Hash.html
index dd354f5d..bc8ea095 100644
--- a/html-test/ref/Hash.html
+++ b/html-test/ref/Hash.html
@@ -276,34 +276,40 @@ window.onload = function () {pageLoad();setSynopsis("mini_Hash.html");};
 	    ><div id="section.i:Hash" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >Hash</a
-		    > <a href=""
-		    >Float</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Hash</a
+		      > <a href=""
+		      >Float</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><a href=""
-		    >Hash</a
-		    > <a href=""
-		    >Int</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Hash</a
+		      > <a href=""
+		      >Int</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  >(<a href=""
-		    >Hash</a
-		    > a, <a href=""
-		    >Hash</a
-		    > b) =&gt; <a href=""
-		    >Hash</a
-		    > (a, b)</td
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    >(<a href=""
+		      >Hash</a
+		      > a, <a href=""
+		      >Hash</a
+		      > b) =&gt; <a href=""
+		      >Hash</a
+		      > (a, b)</span
+		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
@@ -317,7 +323,7 @@ window.onload = function () {pageLoad();setSynopsis("mini_Hash.html");};
     ><p
       >Produced by <a href=""
 	>Haddock</a
-	> version 2.15.0</p
+	> version 2.16.1</p
       ></div
     ></body
   ></html
diff --git a/html-test/ref/HiddenInstances.html b/html-test/ref/HiddenInstances.html
index 9aaea67c..a0d84fb7 100644
--- a/html-test/ref/HiddenInstances.html
+++ b/html-test/ref/HiddenInstances.html
@@ -79,11 +79,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstances.html")
 	    ><div id="section.i:VisibleClass" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >VisibleClass</a
-		    > <a href=""
-		    >Int</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >VisibleClass</a
+		      > <a href=""
+		      >Int</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -91,11 +93,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstances.html")
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><a href=""
-		    >VisibleClass</a
-		    > <a href=""
-		    >VisibleData</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >VisibleClass</a
+		      > <a href=""
+		      >VisibleData</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -123,11 +127,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstances.html")
 	    ><div id="section.i:VisibleData" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >Num</a
-		    > <a href=""
-		    >VisibleData</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Num</a
+		      > <a href=""
+		      >VisibleData</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -135,11 +141,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstances.html")
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><a href=""
-		    >VisibleClass</a
-		    > <a href=""
-		    >VisibleData</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >VisibleClass</a
+		      > <a href=""
+		      >VisibleData</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -156,7 +164,7 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstances.html")
     ><p
       >Produced by <a href=""
 	>Haddock</a
-	> version 2.15.0</p
+	> version 2.16.1</p
       ></div
     ></body
   ></html
diff --git a/html-test/ref/HiddenInstancesB.html b/html-test/ref/HiddenInstancesB.html
index 9d377488..40e6a5ba 100644
--- a/html-test/ref/HiddenInstancesB.html
+++ b/html-test/ref/HiddenInstancesB.html
@@ -79,11 +79,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstancesB.html"
 	    ><div id="section.i:Foo" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >Foo</a
-		    > <a href=""
-		    >Bar</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Foo</a
+		      > <a href=""
+		      >Bar</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -111,11 +113,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstancesB.html"
 	    ><div id="section.i:Bar" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >Foo</a
-		    > <a href=""
-		    >Bar</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Foo</a
+		      > <a href=""
+		      >Bar</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -132,7 +136,7 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstancesB.html"
     ><p
       >Produced by <a href=""
 	>Haddock</a
-	> version 2.15.0</p
+	> version 2.16.1</p
       ></div
     ></body
   ></html
diff --git a/html-test/ref/QuasiExpr.html b/html-test/ref/QuasiExpr.html
index 7c249819..eb0659b2 100644
--- a/html-test/ref/QuasiExpr.html
+++ b/html-test/ref/QuasiExpr.html
@@ -107,11 +107,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_QuasiExpr.html");};
 	    ><div id="section.i:Expr" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >Show</a
-		    > <a href=""
-		    >Expr</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Show</a
+		      > <a href=""
+		      >Expr</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
@@ -171,11 +173,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_QuasiExpr.html");};
 	    ><div id="section.i:BinOp" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >Show</a
-		    > <a href=""
-		    >BinOp</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Show</a
+		      > <a href=""
+		      >BinOp</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
@@ -214,7 +218,7 @@ window.onload = function () {pageLoad();setSynopsis("mini_QuasiExpr.html");};
     ><p
       >Produced by <a href=""
 	>Haddock</a
-	> version 2.15.0</p
+	> version 2.16.1</p
       ></div
     ></body
   ></html
diff --git a/html-test/ref/SpuriousSuperclassConstraints.html b/html-test/ref/SpuriousSuperclassConstraints.html
index 540dfab0..76576260 100644
--- a/html-test/ref/SpuriousSuperclassConstraints.html
+++ b/html-test/ref/SpuriousSuperclassConstraints.html
@@ -83,24 +83,28 @@ Fix spurious superclass constraints bug.</pre
 	    ><div id="section.i:SomeType" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >Functor</a
-		    > (<a href=""
-		    >SomeType</a
-		    > f)</td
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Functor</a
+		      > (<a href=""
+		      >SomeType</a
+		      > f)</span
+		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><a href=""
-		    >Applicative</a
-		    > f =&gt; <a href=""
-		    >Applicative</a
-		    > (<a href=""
-		    >SomeType</a
-		    > f)</td
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Applicative</a
+		      > f =&gt; <a href=""
+		      >Applicative</a
+		      > (<a href=""
+		      >SomeType</a
+		      > f)</span
+		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
@@ -114,7 +118,7 @@ Fix spurious superclass constraints bug.</pre
     ><p
       >Produced by <a href=""
 	>Haddock</a
-	> version 2.15.0</p
+	> version 2.16.1</p
       ></div
     ></body
   ></html
diff --git a/html-test/ref/Test.html b/html-test/ref/Test.html
index bcc91534..70257118 100644
--- a/html-test/ref/Test.html
+++ b/html-test/ref/Test.html
@@ -1519,21 +1519,25 @@ window.onload = function () {pageLoad();setSynopsis("mini_Test.html");};
 	    ><div id="section.i:D" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >D</a
-		    > <a href=""
-		    >Float</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >D</a
+		      > <a href=""
+		      >Float</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><a href=""
-		    >D</a
-		    > <a href=""
-		    >Int</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >D</a
+		      > <a href=""
+		      >Int</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
@@ -2112,7 +2116,7 @@ is at the beginning of the line).</pre
     ><p
       >Produced by <a href=""
 	>Haddock</a
-	> version 2.16.0</p
+	> version 2.16.1</p
       ></div
     ></body
   ></html
diff --git a/html-test/ref/TypeFamilies.html b/html-test/ref/TypeFamilies.html
index f6fa43c7..a8456b6b 100644
--- a/html-test/ref/TypeFamilies.html
+++ b/html-test/ref/TypeFamilies.html
@@ -211,11 +211,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	    ><div id="section.i:X" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >Assoc</a
-		    > * <a href=""
-		    >X</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Assoc</a
+		      > * <a href=""
+		      >X</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -223,11 +225,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><a href=""
-		    >Test</a
-		    > * <a href=""
-		    >X</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Test</a
+		      > * <a href=""
+		      >X</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -235,29 +239,33 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><a href=""
-		    >(&gt;&lt;)</a
-		    > <a href=""
-		    >X</a
-		    > <a href=""
-		    >XX</a
-		    > <a href=""
-		    >XXX</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >(&gt;&lt;)</a
+		      > <a href=""
+		      >X</a
+		      > <a href=""
+		      >XX</a
+		      > <a href=""
+		      >XXX</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >Foo</a
-		    > <a href=""
-		    >X</a
-		    > = <a href=""
-		    >Y</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >Foo</a
+		      > <a href=""
+		      >X</a
+		      > = <a href=""
+		      >Y</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -265,69 +273,75 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >AssocD</a
-		    > * <a href=""
-		    >X</a
-		    > = <a name="v:AssocX" class="def"
-		    >AssocX</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >AssocD</a
+		      > * <a href=""
+		      >X</a
+		      > = <a name="v:AssocX" class="def"
+		      >AssocX</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >AssocT</a
-		    > * <a href=""
-		    >X</a
-		    > = <a href=""
-		    >Foo</a
-		    > * <a href=""
-		    >X</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >AssocT</a
+		      > * <a href=""
+		      >X</a
+		      > = <a href=""
+		      >Foo</a
+		      > * <a href=""
+		      >X</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >Bat</a
-		    > * <a href=""
-		    >X</a
-		    > <ul class="inst"
-		    ><li class="inst"
-		      >= <a name="v:BatX" class="def"
-			>BatX</a
-			> <a href=""
-			>X</a
-			></li
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >Bat</a
+		      > * <a href=""
+		      >X</a
+		      > <ul class="inst"
 		      ><li class="inst"
-		      >| <a name="v:BatXX" class="def"
-			>BatXX</a
-			> { <ul class="subs"
-			><li
-			  ><a name="v:aaa" class="def"
-			    >aaa</a
-			    > :: <a href=""
-			    >X</a
-			    ></li
+			>= <a name="v:BatX" class="def"
+			  >BatX</a
+			  > <a href=""
+			  >X</a
+			  ></li
+			><li class="inst"
+			>| <a name="v:BatXX" class="def"
+			  >BatXX</a
+			  > { <ul class="subs"
 			  ><li
-			  ><a name="v:bbb" class="def"
-			    >bbb</a
-			    > :: <a href=""
-			    >Y</a
-			    ></li
-			  ></ul
-			> }</li
-		      ></ul
+			    ><a name="v:aaa" class="def"
+			      >aaa</a
+			      > :: <a href=""
+			      >X</a
+			      ></li
+			    ><li
+			    ><a name="v:bbb" class="def"
+			      >bbb</a
+			      > :: <a href=""
+			      >Y</a
+			      ></li
+			    ></ul
+			  > }</li
+			></ul
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -335,15 +349,17 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >Foo</a
-		    > * <a href=""
-		    >X</a
-		    > = <a href=""
-		    >Y</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >Foo</a
+		      > * <a href=""
+		      >X</a
+		      > = <a href=""
+		      >Y</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -351,33 +367,37 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >(&lt;&gt;)</a
-		    > * <a href=""
-		    >X</a
-		    > a = <a href=""
-		    >X</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >(&lt;&gt;)</a
+		      > * <a href=""
+		      >X</a
+		      > a = <a href=""
+		      >X</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >(&lt;&gt;)</a
-		    > <a href=""
-		    >X</a
-		    > <a href=""
-		    >XXX</a
-		    > <a href=""
-		    >XX</a
-		    > = <a href=""
-		    >X</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >(&lt;&gt;)</a
+		      > <a href=""
+		      >X</a
+		      > <a href=""
+		      >XXX</a
+		      > <a href=""
+		      >XX</a
+		      > = <a href=""
+		      >X</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
@@ -403,11 +423,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	    ><div id="section.i:Y" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >Assoc</a
-		    > * <a href=""
-		    >Y</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Assoc</a
+		      > * <a href=""
+		      >Y</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -415,11 +437,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><a href=""
-		    >Test</a
-		    > * <a href=""
-		    >Y</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Test</a
+		      > * <a href=""
+		      >Y</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -427,59 +451,67 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >Bar</a
-		    > <a href=""
-		    >Y</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >Bar</a
+		      > <a href=""
+		      >Y</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >AssocD</a
-		    > * <a href=""
-		    >Y</a
-		    > = <a name="v:AssocY" class="def"
-		    >AssocY</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >AssocD</a
+		      > * <a href=""
+		      >Y</a
+		      > = <a name="v:AssocY" class="def"
+		      >AssocY</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >AssocT</a
-		    > * <a href=""
-		    >Y</a
-		    > = <a href=""
-		    >Bat</a
-		    > * <a href=""
-		    >Y</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >AssocT</a
+		      > * <a href=""
+		      >Y</a
+		      > = <a href=""
+		      >Bat</a
+		      > * <a href=""
+		      >Y</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >Bat</a
-		    > * <a href=""
-		    >Y</a
-		    > = <a name="v:BatY" class="def"
-		    >BatY</a
-		    > <a href=""
-		    >Y</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >Bat</a
+		      > * <a href=""
+		      >Y</a
+		      > = <a name="v:BatY" class="def"
+		      >BatY</a
+		      > <a href=""
+		      >Y</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -487,15 +519,17 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >Foo</a
-		    > * <a href=""
-		    >Y</a
-		    > = <a href=""
-		    >X</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >Foo</a
+		      > * <a href=""
+		      >Y</a
+		      > = <a href=""
+		      >X</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -503,14 +537,16 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >(&lt;&gt;)</a
-		    > * <a href=""
-		    >Y</a
-		    > a = a</td
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >(&lt;&gt;)</a
+		      > * <a href=""
+		      >Y</a
+		      > a = a</span
+		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
@@ -557,53 +593,55 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	    ><div id="section.i:Z" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >Bat</a
-		    > <a href=""
-		    >Z</a
-		    > <span class="keyword"
-		    >where</span
-		    ><ul class="inst"
-		    ><li class="inst"
-		      ><a name="v:BatZ1" class="def"
-			>BatZ1</a
-			> ::  <a href=""
-			>Z</a
-			> -&gt; <a href=""
-			>Bat</a
-			> <a href=""
-			>Z</a
-			> <a href=""
-			>ZA</a
-			></li
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >Bat</a
+		      > <a href=""
+		      >Z</a
+		      > <span class="keyword"
+		      >where</span
+		      ><ul class="inst"
 		      ><li class="inst"
-		      ><a name="v:BatZ2" class="def"
-			>BatZ2</a
-			> :: { <ul class="subs"
-			><li
-			  ><a name="v:batx" class="def"
-			    >batx</a
-			    > :: <a href=""
-			    >X</a
-			    ></li
+			><a name="v:BatZ1" class="def"
+			  >BatZ1</a
+			  > ::  <a href=""
+			  >Z</a
+			  > -&gt; <a href=""
+			  >Bat</a
+			  > <a href=""
+			  >Z</a
+			  > <a href=""
+			  >ZA</a
+			  ></li
+			><li class="inst"
+			><a name="v:BatZ2" class="def"
+			  >BatZ2</a
+			  > :: { <ul class="subs"
 			  ><li
-			  ><a name="v:baty" class="def"
-			    >baty</a
-			    > :: <a href=""
-			    >Y</a
-			    ></li
-			  ></ul
-			> } -&gt; <a href=""
-			>Bat</a
-			> <a href=""
-			>Z</a
-			> <a href=""
-			>ZB</a
-			></li
-		      ></ul
+			    ><a name="v:batx" class="def"
+			      >batx</a
+			      > :: <a href=""
+			      >X</a
+			      ></li
+			    ><li
+			    ><a name="v:baty" class="def"
+			      >baty</a
+			      > :: <a href=""
+			      >Y</a
+			      ></li
+			    ></ul
+			  > } -&gt; <a href=""
+			  >Bat</a
+			  > <a href=""
+			  >Z</a
+			  > <a href=""
+			  >ZB</a
+			  ></li
+			></ul
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -631,11 +669,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	    ><div id="section.i:Test" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >Test</a
-		    > * <a href=""
-		    >Y</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Test</a
+		      > * <a href=""
+		      >Y</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -643,11 +683,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><a href=""
-		    >Test</a
-		    > * <a href=""
-		    >X</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Test</a
+		      > * <a href=""
+		      >X</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -675,15 +717,17 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	    ><div id="section.i:Foo" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >Foo</a
-		    > * <a href=""
-		    >Y</a
-		    > = <a href=""
-		    >X</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >Foo</a
+		      > * <a href=""
+		      >Y</a
+		      > = <a href=""
+		      >X</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -691,15 +735,17 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >Foo</a
-		    > * <a href=""
-		    >X</a
-		    > = <a href=""
-		    >Y</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >Foo</a
+		      > * <a href=""
+		      >X</a
+		      > = <a href=""
+		      >Y</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -727,53 +773,55 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	    ><div id="section.i:Bat" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >Bat</a
-		    > <a href=""
-		    >Z</a
-		    > <span class="keyword"
-		    >where</span
-		    ><ul class="inst"
-		    ><li class="inst"
-		      ><a name="v:BatZ1" class="def"
-			>BatZ1</a
-			> ::  <a href=""
-			>Z</a
-			> -&gt; <a href=""
-			>Bat</a
-			> <a href=""
-			>Z</a
-			> <a href=""
-			>ZA</a
-			></li
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >Bat</a
+		      > <a href=""
+		      >Z</a
+		      > <span class="keyword"
+		      >where</span
+		      ><ul class="inst"
 		      ><li class="inst"
-		      ><a name="v:BatZ2" class="def"
-			>BatZ2</a
-			> :: { <ul class="subs"
-			><li
-			  ><a name="v:batx" class="def"
-			    >batx</a
-			    > :: <a href=""
-			    >X</a
-			    ></li
+			><a name="v:BatZ1" class="def"
+			  >BatZ1</a
+			  > ::  <a href=""
+			  >Z</a
+			  > -&gt; <a href=""
+			  >Bat</a
+			  > <a href=""
+			  >Z</a
+			  > <a href=""
+			  >ZA</a
+			  ></li
+			><li class="inst"
+			><a name="v:BatZ2" class="def"
+			  >BatZ2</a
+			  > :: { <ul class="subs"
 			  ><li
-			  ><a name="v:baty" class="def"
-			    >baty</a
-			    > :: <a href=""
-			    >Y</a
-			    ></li
-			  ></ul
-			> } -&gt; <a href=""
-			>Bat</a
-			> <a href=""
-			>Z</a
-			> <a href=""
-			>ZB</a
-			></li
-		      ></ul
+			    ><a name="v:batx" class="def"
+			      >batx</a
+			      > :: <a href=""
+			      >X</a
+			      ></li
+			    ><li
+			    ><a name="v:baty" class="def"
+			      >baty</a
+			      > :: <a href=""
+			      >Y</a
+			      ></li
+			    ></ul
+			  > } -&gt; <a href=""
+			  >Bat</a
+			  > <a href=""
+			  >Z</a
+			  > <a href=""
+			  >ZB</a
+			  ></li
+			></ul
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -781,17 +829,19 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >Bat</a
-		    > * <a href=""
-		    >Y</a
-		    > = <a name="v:BatY" class="def"
-		    >BatY</a
-		    > <a href=""
-		    >Y</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >Bat</a
+		      > * <a href=""
+		      >Y</a
+		      > = <a name="v:BatY" class="def"
+		      >BatY</a
+		      > <a href=""
+		      >Y</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -799,39 +849,41 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >Bat</a
-		    > * <a href=""
-		    >X</a
-		    > <ul class="inst"
-		    ><li class="inst"
-		      >= <a name="v:BatX" class="def"
-			>BatX</a
-			> <a href=""
-			>X</a
-			></li
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >Bat</a
+		      > * <a href=""
+		      >X</a
+		      > <ul class="inst"
 		      ><li class="inst"
-		      >| <a name="v:BatXX" class="def"
-			>BatXX</a
-			> { <ul class="subs"
-			><li
-			  ><a name="v:aaa" class="def"
-			    >aaa</a
-			    > :: <a href=""
-			    >X</a
-			    ></li
+			>= <a name="v:BatX" class="def"
+			  >BatX</a
+			  > <a href=""
+			  >X</a
+			  ></li
+			><li class="inst"
+			>| <a name="v:BatXX" class="def"
+			  >BatXX</a
+			  > { <ul class="subs"
 			  ><li
-			  ><a name="v:bbb" class="def"
-			    >bbb</a
-			    > :: <a href=""
-			    >Y</a
-			    ></li
-			  ></ul
-			> }</li
-		      ></ul
+			    ><a name="v:aaa" class="def"
+			      >aaa</a
+			      > :: <a href=""
+			      >X</a
+			      ></li
+			    ><li
+			    ><a name="v:bbb" class="def"
+			      >bbb</a
+			      > :: <a href=""
+			      >Y</a
+			      ></li
+			    ></ul
+			  > }</li
+			></ul
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -883,11 +935,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	    ><div id="section.i:Assoc" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >Assoc</a
-		    > * <a href=""
-		    >Y</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Assoc</a
+		      > * <a href=""
+		      >Y</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -895,11 +949,13 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><a href=""
-		    >Assoc</a
-		    > * <a href=""
-		    >X</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >Assoc</a
+		      > * <a href=""
+		      >X</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -963,45 +1019,51 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	    ><div id="section.i:-60--62-" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >(&lt;&gt;)</a
-		    > * <a href=""
-		    >Y</a
-		    > a = a</td
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >(&lt;&gt;)</a
+		      > * <a href=""
+		      >Y</a
+		      > a = a</span
+		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >(&lt;&gt;)</a
-		    > * <a href=""
-		    >X</a
-		    > a = <a href=""
-		    >X</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >(&lt;&gt;)</a
+		      > * <a href=""
+		      >X</a
+		      > a = <a href=""
+		      >X</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >(&lt;&gt;)</a
-		    > <a href=""
-		    >X</a
-		    > <a href=""
-		    >XXX</a
-		    > <a href=""
-		    >XX</a
-		    > = <a href=""
-		    >X</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >(&lt;&gt;)</a
+		      > <a href=""
+		      >X</a
+		      > <a href=""
+		      >XXX</a
+		      > <a href=""
+		      >XX</a
+		      > = <a href=""
+		      >X</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
@@ -1023,15 +1085,17 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	    ><div id="section.i:-62--60-" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><a href=""
-		    >(&gt;&lt;)</a
-		    > <a href=""
-		    >X</a
-		    > <a href=""
-		    >XX</a
-		    > <a href=""
-		    >XXX</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><a href=""
+		      >(&gt;&lt;)</a
+		      > <a href=""
+		      >X</a
+		      > <a href=""
+		      >XX</a
+		      > <a href=""
+		      >XXX</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
@@ -1046,7 +1110,7 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
     ><p
       >Produced by <a href=""
 	>Haddock</a
-	> version 2.15.0</p
+	> version 2.16.1</p
       ></div
     ></body
   ></html
diff --git a/html-test/ref/TypeFamilies2.html b/html-test/ref/TypeFamilies2.html
index 3fc76959..e71cdcb8 100644
--- a/html-test/ref/TypeFamilies2.html
+++ b/html-test/ref/TypeFamilies2.html
@@ -85,29 +85,33 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies2.html");}
 	    ><div id="section.i:W" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >Bar</a
-		    > <a href=""
-		    >W</a
-		    > = <a name="v:BarX" class="def"
-		    >BarX</a
-		    > Z</td
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >Bar</a
+		      > <a href=""
+		      >W</a
+		      > = <a name="v:BarX" class="def"
+		      >BarX</a
+		      > Z</span
+		    ></td
 		  ><td class="doc"
 		  ><p
 		    >Shown because BarX is still exported despite Z being hidden</p
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >Foo</a
-		    > <a href=""
-		    >W</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >Foo</a
+		      > <a href=""
+		      >W</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -135,13 +139,15 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies2.html");}
 	    ><div id="section.i:Foo" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >Foo</a
-		    > <a href=""
-		    >W</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >Foo</a
+		      > <a href=""
+		      >W</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -149,15 +155,17 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies2.html");}
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >type</span
-		    > <a href=""
-		    >Foo</a
-		    > <a href=""
-		    >X</a
-		    > = <a href=""
-		    >Y</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >type</span
+		      > <a href=""
+		      >Foo</a
+		      > <a href=""
+		      >X</a
+		      > = <a href=""
+		      >Y</a
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -185,29 +193,33 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies2.html");}
 	    ><div id="section.i:Bar" class="show"
 	    ><table
 	      ><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >Bar</a
-		    > <a href=""
-		    >W</a
-		    > = <a name="v:BarX" class="def"
-		    >BarX</a
-		    > Z</td
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >Bar</a
+		      > <a href=""
+		      >W</a
+		      > = <a name="v:BarX" class="def"
+		      >BarX</a
+		      > Z</span
+		    ></td
 		  ><td class="doc"
 		  ><p
 		    >Shown because BarX is still exported despite Z being hidden</p
 		    ></td
 		  ></tr
 		><tr
-		><td class="src"
-		  ><span class="keyword"
-		    >data</span
-		    > <a href=""
-		    >Bar</a
-		    > <a href=""
-		    >Y</a
+		><td class="src clearfix"
+		  ><span class="inst-left"
+		    ><span class="keyword"
+		      >data</span
+		      > <a href=""
+		      >Bar</a
+		      > <a href=""
+		      >Y</a
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
@@ -222,7 +234,7 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies2.html");}
     ><p
       >Produced by <a href=""
 	>Haddock</a
-	> version 2.15.0</p
+	> version 2.16.1</p
       ></div
     ></body
   ></html
diff --git a/html-test/ref/ocean.css b/html-test/ref/ocean.css
index de436324..1110b407 100644
--- a/html-test/ref/ocean.css
+++ b/html-test/ref/ocean.css
@@ -318,6 +318,7 @@ div#style-menu-holder {
   height: 80%;
   top: 10%;
   padding: 0;
+  max-width: 75%;
 }
 
 #synopsis .caption {
@@ -378,6 +379,15 @@ div#style-menu-holder {
   margin: 0 -0.5em 0 0.5em;
 }
 
+#interface td.src .link {
+  float: right;
+  color: #919191;
+  border-left: 1px solid #919191;
+  background: #f0f0f0;
+  padding: 0 0.5em 0.2em;
+  margin: 0 -0.5em 0 0.5em;
+}
+
 #interface span.fixity {
   color: #919191;
   border-left: 1px solid #919191;
@@ -406,6 +416,14 @@ div#style-menu-holder {
   margin-top: 0.8em;
 }
 
+.clearfix:after {
+  clear: both;
+  content: " ";
+  display: block;
+  height: 0;
+  visibility: hidden;
+}
+
 .subs dl {
   margin: 0;
 }
@@ -445,6 +463,11 @@ div#style-menu-holder {
   margin-left: 1em;
 }
 
+/* Workaround for bug in Firefox (issue #384) */
+.inst-left {
+  float: left;
+}
+
 .top p.src {
   border-top: 1px solid #ccc;
 }