title: How do I divide a page in three vertical sections?
body: <p>I want to convert my web page into four section, one horizontal and three vertical. The horizontal section is okay, but there are two issues with vertical sections:</p>
  
  <ol>
  <li>They are not filling the complete screen height.</li>
  <li>The third section is overlapping with second section by nearly 10 or 20 pixels.</li>
  </ol>
  
  <p>Here is my CSS:</p>
  
  <pre><code>body{
      width: available;
      height: available;
  }
  
  .container{
      width: available;
      height: available;
  }
  
  .leftpane{
      width: 25%;
      min-width: 350px;
      height: available;
      min-height: 400px;
      float: left;
      background-color: rosybrown;
      border-collapse: collapse;
  }
  
  .middlepane{
     width: 50%;
     min-width: 800px;
     height: available;
     min-height: 650px;
     float: left;
     background-color: royalblue;
     border-collapse: collapse;
  }
  
  .rightpane{
      width: available;
      height: available;
      position: relative;
      margin-left: 75%;
      background-color: yellow;
      border-collapse: collapse;
  }
  
  .toppane{
      width: available;
      height: 100px;
      border-collapse: collapse;
      background-color: #4da6ff;
  }
  </code></pre>
  
  <p>And this is the HTML page:</p>
  
  <pre><code>&lt;div class="container"&gt;
              &lt;div class="toppane"&gt;Test Page&lt;/div&gt;
              &lt;div class="leftpane"&gt;&lt;h1&gt;Test Page&lt;/h1&gt;&lt;/div&gt;
              &lt;div class="middlepane"&gt;Test Page&lt;/div&gt;
              &lt;div class="rightpane"&gt;&lt;h1&gt;Test Page&lt;/h1&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My output is this:</p>
  
  <p><a href="https://i.stack.imgur.com/nJHHC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nJHHC.png" alt="Image of my output"></a></p>
  
  <p>And I want it to be like this:</p>
  
  <p><a href="https://i.stack.imgur.com/T0Tfp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/T0Tfp.png" alt="Enter image description here"></a></p>
  
  <p>Here is <a href="https://jsfiddle.net/amitkumarsoni/yk3zr1w8/" rel="noreferrer">a jsfiddle</a>.</p>