content displaying below links - html

Question

Hi i am trying to create a blog website and i have problem that i divided page section in 3 parts i want 1,3 part section height should be equal to 2part(content part) height how to do that i tried many times but not happening
attaching screenshot of output i highlighted the part where i don't want text.
i know solution by bootstrap and js but i want from html/css
function myfucn(){
var a = document.querySelector(".content");
var b = document.querySelector(".left");
a.innerHeight() = window.innerHeight();
}
*{
padding:0px;
box-shadow: none;
margin: 0px;
}
.top{
width: cover;
height: 200px;
text-align: center;
}
.left{
text-align: center;
height: 100%;
float: left;
width: 200px;
background-color: green;
}
.right{
float: right;
width: 200px;
height: 500px;
}
.bottom{
position:fixed;
bottom: 0;
}
a{
text-decoration: none;
padding-right: 30px;
}
ul li{
list-style: none;
display: inline-block;
}
.name{
text-align: left;
padding-left: 30px;
top: -10px;
}
.name:hover{
color: red;
}
.namedes{
text-align: left;
padding-left: 35px;
}
.authorimg:hover{
transition: 2s;
transition-property: fade-in;
transform:rotate(10deg);
}
.googletranslate{
padding-top: 10px;
font-weight: 10;
}
.hackingsubmenu{
width: 100px;
height: 50px;
background-color: transparent;
font-size: 10px;
list-style: none;
text-align: left;
display: none;
}
/*.hacking:hover .hackingsubmenu{
display: block;
}*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="top"><!-- top -->
<ul> <!-- links -->
<li>HOME</li>
<li>ABOUT</li>
<li>HACKING
<ul class="hackingsubmenu">
<li>web hacking</li>
<li>app hacking</li>
<li>android hacking</li>
</ul>
</li>
<li>PROGRAMMING</li>
<li>ANDROID</li>
<li>WINTRICKS</li>
<li>SHARE WITH US</li>
<li>DOWNLOAD SOFTWARE</li>
</ul><!-- end of links -->
<div class="jumbotron"><!-- jumbotron -->
<h3 class="name">VAIBHAV'S BLOG</h3>
<p class="namedes">learn ethical hacking in a good way </p>
</div><!-- end of jumbotron -->
</div>
<div class="left"><!-- left -->
<h3>Author</h3>
<img class="authorimg" src="img/All-Time-Popular-Top-15-Hacking-Tool-For-Hackers-2015-Angry-IP-Scanner.png" alt="image" height="200px; width:cover" />
<h3>Categories</h3>
<ul style="list-style:none;">
<li>Android hacking</li><br/>
<li>Web hacking</li>
<li>Application hacking</li>
<li>Software hacking </li>
</ul>
</div><!-- end of left -->
<div class="right"><!-- right -->
<!-- google translate -->
<h4 class="googletranslate" style="text-align: center;" title="you are at right place you can now easily translate your webpage">GOOGLE TRANSLATE</h4>
<!-- google translate end -->
<!-- page counter -->
<h4 class="pagecounter" style="text-align: center;">PAGE COUNTER</h4>
<!-- end of page counter -->
</div>
<div class="bottom"><!-- bottom -->
<h6 class="fa fa-facebook">follow us on fb </h6>
</div>
screenshot of output

Answer 1

Alright, if you don't want to use any lib. You can wrap all your left, center, and right div into one div call middle (any name you like), then you style middle div with width: 100%.
Your content should be inside the center div. Your center div should have style float: left
<div class="middle" style="width: 100%;">
<!-- left -->
<div class="left" width="20%">
left
</div>
<!-- end of left -->
<!-- left -->
<div class="center" style="width: 60%; float: left">
the very long content here
</div>
<!-- right -->
<div class="right" style="width: 20%">
right
</div>
</div>

Answer 2

Use css grid. You don't have to even touch your html structure.
Here it is:
body {
padding: 0px;
margin: 0px;
height: 100vh;
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: auto auto 50px;
background: peru;
}
.top {
grid-column: 1;
grid-row: 1;
text-align: center;
background: #ccc;
}
.left {
grid-column: 1;
grid-row: 2;
text-align: center;
background-color: green;
}
.right {
grid-column: 2;
grid-row: 1 / span 2;
background: yellow;
overflow: auto;
}
.bottom {
background: pink;
grid-column: 1 / span 2;
grid-row: 3;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LAYOUT</title>
</head>
<body>
<div class="top">
TOP
</div>
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
<div class="bottom">
BOTTOM
</div>
</body>
</html>