title: How to create this html page for a simple dashboard?
body: <p>I have no experience with web design and I am trying desperately to create a simple web page that will contain a <code>D3.js</code> graph (a sweet framework to create graphs and dashboards) but I have a very big problem with positioning elements.</p>
  
  <p>I am trying to have a page that I represented like this:
  <a href="https://i.stack.imgur.com/f2tIQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f2tIQ.png" alt="enter image description here"></a></p>
  
  <p>The graph data will be generated by a back-end process interacting with some ajax code.
  I know it's simple but I have a real problem with positions, margins, padding etc. </p>
  
  <p>What I tried so far is this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;/html&gt;
  
  
  &lt;head&gt;
    &lt;title&gt;E-Commerce data - Interactive Map&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" type="text/css" href="{% static 'interactive_map.css' %}?v=00001"&gt;
  &lt;/head&gt;
  
  &lt;body bgcolor="#170061"&gt;
      &lt;div id="graph_div"&gt;
        // The graph will be here
      &lt;/div&gt;
      &lt;div id="pannel_div"&gt;
        // The buttons to controle the graph will be here
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And a css file that look like this:</p>
  
  <pre><code>div#graph_div
      {
        border-radius: 2px;
        vertical-align: middle;
        position: relative;
        width: 40%;
        height: 80%;
        top: 20px;
        bottom: 20px;
        right: 180px;
        left: 20px;
        background-color: #ffffff;
      }
  
  div#panel_div
      {
        border-radius: 2px;
        vertical-align: middle;
        position: relative;
        width: 40%;
        height: 80%;
        top: 20px;
        bottom: 180px;
        right: 20px;
        left: 20px;
        background-color: #ffffff;
      }
  </code></pre>
  
  <p>Clearly this won't work ( I know ). Can anybody help me with this? 
  Thank you in advance</p>