Toggle div container overlapping another container under it - css

Question

I have 3 divs on a form page of my website. The top left toggle overlaps the bottom div whenever i click the toggle button.
What I'm trying to do is that the bottom left div container should move down when the top div container is clicked and move back to it's former position when toggle is closed.
I have included the css for the right div, I dont know if that is the css afecting the positions of the two div 's beside it.
Before Toggle
After Toggle
CSS for Toggle
#toggle-view {
list-style:none;
font-family:arial;
font-size:10px;
margin:0;
padding:0;
width:200px;
position: absolute;
}
#toggle-view li {
list-style:none;
text-decoration:none;
font-size:13px;
font-family:'lato';
padding:2px;
margin:10px;
margin-left:20px;
position:relative;
cursor:pointer;
border-radius: 5px;
}
#toggle-view li a:hover {
color: brown;
}
#toggle-view h3 {
margin:0;
font-size:13px;
color:#2a5a9a;
}
#toggle-view span {
position:absolute;
right:5px; top:0;
color:#2a5a9a;
font-size:20px;
font-weight: bolder;
}
#toggle-view p {
margin:5px 0;
display:none;
}
#toggle-view a{
padding:5px 0;
color:#35371c;
}
#toggle-view a:hover{
color:#2a5a9a;
}
CSS for LeftBox
.report{
position: absolute;
margin-top:100px;
margin-left:0;
padding-left: 20px;
}
CSS for Right Box
.register-body {
height:auto;
font-size:1em;
width:710px;
position:relative;
color:#000;
border-radius:5px;
background-color:#d2d4bb;
line-height:20px;
margin:20px 0 20px 250px;
padding:15px 15px 0;
}
UPDATE
When I changed
#toggle-view {
position: absolute;
}
to
#toggle-view {
position: relative;
}
and
.report{
position: absolute;
}
to
.report{
position: relative;
}
I got this :
The Right Box is pushed below the bottom left box.

Answer 1

It's because you're using position absolute. Try doing the layout without absolute positioning and then it will move and flex and bend to your almighty will! :)