title: Jupyter Notebook: HTML rendered in one cell messes up HTML rendered in another
body: <p>I'm building a report in a Jupyter notebook.  Aside from the data visualizations, I have some nicely formatted documentation from a Google doc, with various text colors and formatting, footnotes etc.  I want to include portions of the documentation sporadically throughout the notebook, and so have split the Google doc into segments that I want to render in specific notebook cells, downloaded each portion as HTML, and am now trying to include it in the notebook with </p>
  
  <p><code>IPython.display.HTML(""" [html string] """)</code></p>
  
  <p>The first time I try to render HTML like this, it looks fine.  However, as soon as I try to render a second piece of HTML in a separate cell, <strong>not only does it not render properly with tons of random whitespace and obscured text, it also messes up the initial cell of rendered HTML that previously looked fine.</strong>  Why is the output of one cell altering the output of another?  And what can I do to mitigate this issue?</p>
  
  <pre><code>#setup
  import pandas as pd
  import numpy as np
  import math
  import matplotlib.pyplot as plt
  pd.set_option('display.max_columns', 500)
  pd.set_option('display.max_rows', 10000)
  from bokeh.charts.operations import blend
  from bokeh.charts import Bar, Donut, show
  from bokeh.io import output_notebook
  from bokeh.charts.attributes import CatAttr
  from bokeh.models import HoverTool
  import folium
  output_notebook()
  import IPython as ipython
  import IPython.core.display as di
  
  # This line will hide code by default when the notebook is exported as HTML
  di.display_html('&lt;script&gt;jQuery(function() {if (jQuery("body.notebook_app").length == 0) { jQuery(".input_area").toggle(); jQuery(".prompt").toggle();}});&lt;/script&gt;', raw=True)
  
  ipython.display.HTML("""&lt;html&gt;&lt;head&gt;&lt;meta content="text/html; charset=UTF-8" http-equiv="content-type"&gt;&lt;style type="text/css"&gt;ol{margin:0;padding:0}table td,table th{padding:0}.c8{background-color:#ffffff;max-width:468pt;padding:72pt 72pt 72pt 72pt}.c4{font-size:12pt;color:#cc0000;font-weight:700}.c6{orphans:2;widows:2;height:11pt}.c5{line-height:1.0;orphans:2;widows:2}.c10{orphans:2;widows:2}.c0{color:inherit;text-decoration:inherit}.c9{color:#1155cc;text-decoration:underline}.c1{color:#4c515a;font-size:12pt}.c3{width:33%;height:1px}.c7{font-weight:700}.c2{font-size:10pt}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}&lt;/style&gt;&lt;/head&gt;&lt;body class="c8"&gt;&lt;p class="c10"&gt;&lt;span class="c4"&gt;SEX AND AGE DISAGGREGATION&lt;/span&gt;&lt;sup class="c4"&gt;&lt;a href="#ftnt1" id="ftnt_ref1"&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;&lt;p class="c10"&gt;&lt;span class="c1"&gt;Across the response, the largest age &lt;/span&gt;&lt;span class="c1"&gt;brackets&lt;/span&gt;&lt;span class="c1"&gt;&amp;nbsp;were, understandably &lt;/span&gt;&lt;span class="c1 c7"&gt;18-59 &lt;/span&gt;&lt;span class="c1"&gt;and &lt;/span&gt;&lt;span class="c1 c7"&gt;5-17&lt;/span&gt;&lt;sup class="c1 c7"&gt;&lt;a href="#ftnt2" id="ftnt_ref2"&gt;[2]&lt;/a&gt;&lt;/sup&gt;&lt;span class="c1"&gt;&amp;nbsp;- not surprising, as these are also the widest age &lt;/span&gt;&lt;span class="c1"&gt;brackets&lt;/span&gt;&lt;span class="c1"&gt;. &lt;/span&gt;&lt;/p&gt;&lt;p class="c6"&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;&lt;hr class="c3"&gt;&lt;div&gt;&lt;p class="c5"&gt;&lt;a href="#ftnt_ref1" id="ftnt1"&gt;[1]&lt;/a&gt;&lt;span class="c2"&gt;&amp;nbsp;&lt;/span&gt;&lt;span class="c2"&gt;Further breakdown of SADD and &lt;/span&gt;&lt;span class="c2"&gt;country of origin&lt;/span&gt;&lt;span class="c2"&gt;&amp;nbsp;data by district/camp within Turkey, Greece or the Balkans is also available. &lt;/span&gt;&lt;span class="c1"&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;p class="c5"&gt;&lt;a href="#ftnt_ref2" id="ftnt2"&gt;[2]&lt;/a&gt;&lt;span class="c2"&gt;&amp;nbsp;The range of the current age brackets being used (i.e. the 18-59 brackets) significantly reduces the usefulness of age in analyzing disaggregated data. Greater insights could be gathered around the age-based needs of populations served by Mercy Corps if age were collected using&lt;/span&gt;&lt;span class="c2"&gt;&amp;nbsp;&lt;/span&gt;&lt;span class="c2 c9"&gt;&lt;a class="c0" href="https://www.google.com/url?q=https://thedig.mercycorps.org/page/21&amp;amp;sa=D&amp;amp;ust=1471779169512000&amp;amp;usg=AFQjCNGe-EGnyFOFGO8Kg7MJ0ibxA6YYzw"&gt;Mercy Corps&amp;rsquo; recommended age brackets&lt;/a&gt;&lt;/span&gt;&lt;span class="c2"&gt;, or preferably, collecting the exact age of household members as well as that of registered individuals. &lt;/span&gt;&lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;""")
  
  
  ipython.display.HTML("""&lt;html&gt;&lt;head&gt;&lt;meta content="text/html; charset=UTF-8" http-equiv="content-type"&gt;&lt;style type="text/css"&gt;ol{margin:0;padding:0}table td,table th{padding:0}.c1{background-color:#ffffff;max-width:468pt;padding:72pt 72pt 72pt 72pt}.c2{orphans:2;widows:2}.c0{color:#4c515a;font-size:12pt}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}&lt;/style&gt;&lt;/head&gt;&lt;body class="c1"&gt;&lt;p class="c2"&gt;&lt;span class="c0"&gt;The beneficiary population in Izmir, Turkey is a relatively even split between female/male, with a slightly higher female &lt;/span&gt;&lt;span class="c0"&gt;population&lt;/span&gt;&lt;span class="c0"&gt;. &lt;/span&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;""")
  </code></pre>
  
  <p>After running each of the <code>ipython.display.HTML</code> commands above, if I then clear the output of the second cell, the output of the first returns to perfect formatting.</p>