How do I divide a page in three vertical sections?
<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>