Setting CSS for Google Charts with generated div ids <p>I have a page that projects a series of charts with ids generated with <code>Mako</code> template language in <code>Python</code>.</p> <p>The chart <code>div</code>s are defined like in below.</p> <pre><code>% for step_id in step_ids: ... &lt;div id="step_chart_div${step_id}" style='width: 900px; height: 500px;'&gt;&lt;/div&gt; ... % endfor </code></pre> <p>I want to separate the style part from <code>HTML</code>, so I assigned a class name for the div, and put the <code>style</code> in a separate <code>.css</code> file like</p> <pre><code>.step_charts{ /* style.css */ width: 900px; height: 500px; } % for step_id in step_ids: ... &lt;div class="step_charts" id="step_chart_div${step_id}"&gt;&lt;/div&gt; ... % endfor </code></pre> <p>, but it shortens the height of the chart.</p> <p>At least it allocates the height of 500px for the <code>div</code>, without <code>style</code> it is even shorter, but the size of the chart is short like that without <code>style</code>.</p> <p>How can I fix it? Thank you.</p>