title: how to split the screen into 3 panels and treat each panel separately
body: <p>I'm trying to split a webpage into 3 parts and add different stuff to each of these 3 parts, so before I have this that makes sure the webpage is split into 3 parts:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="leftpane"&gt;
      &lt;h1&gt;Test Page&lt;/h1&gt;&lt;/div&gt;
    &lt;div class="middlepane"&gt;
      &lt;h1&gt;Test Page&lt;/h1&gt;
      &lt;b&gt;&lt;p&gt;This text is bold&lt;/p&gt;
      &lt;p&gt;let's add more text&lt;/p&gt;
      &lt;p&gt;bla bla bla&lt;/p&gt;&lt;/b&gt;
  
  &lt;button&gt;&lt;input type="file" id="myFile"&gt;&lt;/button&gt;
  &lt;/div&gt;
  
    &lt;div class="rightpane"&gt;
      &lt;h1&gt;Test Page&lt;/h1&gt;&lt;/div&gt;
  
  
  &lt;style&gt;
  body, html {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  
  .container {
    width: 100%;
    height: 100%;
  }
  
  .leftpane {
      width: 33%;
      height: 100%;
      float: left;
      background-color: rosybrown;
      border-collapse: collapse;
  
  
  }
  
  .middlepane {
      width: 30%;
      height: 100%;
      float: left;
      background-color: royalblue;
      border-collapse: collapse;
  }
  
  .rightpane {
    width: 37%;
    height: 100%;
    position: relative;
    float: right;
    background-color: yellow;
    border-collapse: collapse;
  }
  
  &lt;/style&gt;
  
  &lt;/div&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>i have this now:
  <a href="https://i.stack.imgur.com/ZMKfh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZMKfh.jpg" alt="enter image description here"></a></p>
  
  <p>and then I'm trying to add this to the left panel:<a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_pie_chart" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_pie_chart</a></p>
  
  <p>but it's messing up the whole structure of the webpage:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Load google charts
  google.charts.load('current', {
    'packages': ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);
  
  // Draw the chart and set the chart values
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work', 8],
      ['Eat', 2],
      ['TV', 4],
      ['Gym', 2],
      ['Sleep', 8]
    ]);
  
    // Optional; add a title and set the width and height of the chart
    var options = {
      'title': 'My Average Day',
      'width': 550,
      'height': 400
    };
  
    // Display the chart inside the &lt;div&gt; element with id="piechart"
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {
        width: 100%;
        height: 100%;
        margin: 0;
      }
      
      .container {
        width: 100%;
        height: 100%;
      }
      
      .leftpane {
          width: 33%;
          height: 100%;
          float: left;
          background-color: rosybrown;
          border-collapse: collapse;
       
      
      }
      
      .middlepane {
          width: 30%;
          height: 100%;
          float: left;
          background-color: royalblue;
          border-collapse: collapse;
      }
      
      .rightpane {
        width: 37%;
        height: 100%;
        position: relative;
        float: right;
        background-color: yellow;
        border-collapse: collapse;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="leftpane"&gt;
      &lt;h1&gt;Test Page&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div id="piechart"&gt;&lt;/div&gt;
    &lt;div class="middlepane"&gt;
      &lt;h1&gt;Test Page&lt;/h1&gt;
      &lt;b&gt;&lt;p&gt;This text is bold&lt;/p&gt;
      &lt;p&gt;let's add more text&lt;/p&gt;
      &lt;p&gt;bla bla bla&lt;/p&gt;&lt;/b&gt;
  
      &lt;button&gt;&lt;input type="file" id="myFile"&gt;&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div class="rightpane"&gt;
      &lt;h1&gt;Test Page&lt;/h1&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>nothing is fixing it.
  <a href="https://i.stack.imgur.com/L8u6c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L8u6c.png" alt="enter image description here"></a>
  Can someone point out how i can fix that? I want the graph just to be on the left panel and not how it's now.
  W</p>