diff --git a/spec/visual/app.rb b/spec/visual/app.rb
index 74c6d623ae..97c27081a7 100644
--- a/spec/visual/app.rb
+++ b/spec/visual/app.rb
@@ -57,7 +57,7 @@ def query_string
     @raw = Rouge.highlight(@sample, 'plaintext', @formatter)
     @highlighted = Rouge.highlight(@sample, @lexer, @formatter)
 
-    template = params[:juxtaposed] ? :juxtaposed : :lexer
+    template = params[:juxtaposed] ? :lexer_juxtaposed : :lexer
     erb template
   end
 
diff --git a/spec/visual/templates/juxtaposed.erb b/spec/visual/templates/juxtaposed.erb
deleted file mode 100644
index e988414508..0000000000
--- a/spec/visual/templates/juxtaposed.erb
+++ /dev/null
@@ -1,69 +0,0 @@
-<style type="text/css">
-  main {
-    display: inline-block;
-    margin-right: -215px;
-    margin-bottom: -5px;
-    padding: 8px 215px 8px 0;
-    width: 100%;
-  }
-  section {
-    float: left;
-    padding: 8px;
-    padding-right: 4px;
-    overflow-y: auto;
-  }
-  pre { margin: 0 }
-
-  .legend {
-    float: right;
-    padding: 16px 8px 8px 0;
-    width: 215px;
-  }
-  .legend header { padding-top: 8px }
-  .codehilite {
-    overflow-x: auto;
-    border-radius: 5px;
-  }
-  .legend .codehilite { font-size: 13px }
-  .codeviewer {
-    float: left;
-    padding: 8px 12px;
-    width: 49%;
-    border: 1px dotted <%= @comment_color %>
-  }
-  .codeviewer:not(:first-of-type) { margin-left: 4px }
-  .codeviewer:not(:last-of-type) { margin-right: 4px }
-
-  .codeviewer header, .legend header {
-    margin-bottom: 20px;
-    padding-bottom: 8px;
-    color: <%= @comment_color %>;
-    border-bottom: 1px dotted
-  }
-</style>
-
-<header id="page-header">
-  <h1><%= @lexer.class.tag %> lexer visual test</h1>
-</header>
-
-<main>
-  <section>
-    <div class="codeviewer">
-      <header class="section-header"><h2>Raw</h2></header>
-      <%= @raw %>
-    </div>
-    <div class="codeviewer">
-      <header class="section-header"><h2>Highlighted</h2></header>
-      <%= @highlighted %>
-    </div>
-  </section>
-</main>
-
-<aside class="legend">
-  <header class="section-header"><h2>Legend</h2></header>
-  <pre class="codehilite">
-<% Rouge::Token.each_token do |token|
-  %><span class="<%= token.shortname %>"><%= token.qualname %></span>
-<% end %>
-  </pre>
-</aside>
diff --git a/spec/visual/templates/lexer_juxtaposed.erb b/spec/visual/templates/lexer_juxtaposed.erb
new file mode 100644
index 0000000000..0ad499f176
--- /dev/null
+++ b/spec/visual/templates/lexer_juxtaposed.erb
@@ -0,0 +1,47 @@
+<style type="text/css">
+  main {
+    display: inline-block;
+    margin-right: -300px;
+    padding: 15px 300px 15px 15px;
+    width: 100%;
+  }
+
+  .legend {
+    float: right;
+    padding: 15px;
+    padding-left: 0;
+    width: 250px;
+  }
+
+  div.codeviewer {
+    display: inline-block;
+    margin-right: 15px;
+    width: 48%;
+  }
+</style>
+
+<header id="page-header">
+  <h1><%= @lexer.class.tag %> lexer visual test</h1>
+</header>
+
+<main>
+  <section>
+    <div class="codeviewer">
+      <header class="section-header"><h2>Raw</h2></header>
+      <%= @raw %>
+    </div>
+    <div class="codeviewer">
+      <header class="section-header"><h2>Highlighted</h2></header>
+      <%= @highlighted %>
+    </div>
+  </section>
+</main>
+
+<aside class="legend">
+  <header class="section-header"><h2>Legend</h2></header>
+  <pre class="codehilite">
+<% Rouge::Token.each_token do |token|
+  %><span class="<%= token.shortname %>"><%= token.qualname %></span>
+<% end %>
+  </pre>
+</aside>