How can i separate this div overlap - css

Question

I am trying to build a web form and the divs keep overlapping.
I am confused as to why.
I have separated all into separate divs and I'm trying to have them stack one after the other.
How can I get all the divs to be in separate rows such that it doesnt overlap.
This is the component.html file:
<div>
<!--Navbar-->
<mat-toolbar color="primary">
<div class="centerNavBar">
<a mat-button href="fa-dashboard">Back</a>
<span class="headSpacer">Damage Assessment Tool</span>
<a mat-button href="">Logout</a>
</div>
</mat-toolbar>
</div>
<div>
<mat-sidenav-container class="MainContainter">
<!--SideNav-->
<mat-sidenav mode="side" opened>
<div>
<a mat-button href="">Message Board</a>
</div>
</mat-sidenav>
<mat-sidenav-content class="MainContent">
<mat-card>
<mat-card-header class="sect">Create report:</mat-card-header>
<br><br>
<mat-card-content>
<!--Div for form-->
<div>
<mat-form-field>
<input
#MOCDateInput
matInput type= "Date"
required>
</mat-form-field>
<br>
<mat-form-field>
<mat-label>Comment</mat-label>
<input
#DescriptionInput
placeholder="--"
matInput type= "string"
required>
</mat-form-field>
<br>
<mat-form-field>
<mat-label>Facility In Question</mat-label>
<input
#MOCFacilityInput
placeholder="--"
matInput type= "string"
required>
</mat-form-field>
<br>
<br>
</div>
<div class="MOCMap">
<!--Div for Map-->
<div class="map-container">
<div class="map-frame">
<div id="map"></div>
</div>
</div>
</div>
<!--Div for buttons-->
<div>
<input
style="display: none;"
#ImageInput
type= "file"
(change)="onFileSelected($event)">
<br>
<br>
<button mat-raised-button type="button" (click)="ImageInput.click()">Upload An Image</button>
<button mat-raised-button
type="submit"
(click)="createMOCForm(MOCFacilityInput.value, DescriptionInput.value, MOCDateInput.value)" color="primary">Submit Report</button>
</div>
</mat-card-content>
</mat-card>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
The image shows the overlap
This is the global css file:
/* You can add global styles to this file, and also import other style files */
#import "~leaflet/dist/leaflet.css";
html, body {height: 100%}
body {
margin: 0;
font-family: Roboto;
background-color: ghostwhite;
}
.sect{
display: block;
margin-top: auto;
margin-left: auto;
margin-right: auto;
width: 850px;
background-color: white;
}
.centerNavBar {
margin: auto;
width: auto;
padding: auto;
}
.headSpacer{
margin-left: 100px;
margin-right: 100px;
}
/*map*/
.map-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 50px;
}
.map-frame {
border: 2px solid black;
height: 100%;
width: 50%;
}
#map {
height: 100%;
}
Any help would be appreciate, thank you in advance.

Answer 1

You want it to be laid out as
Form
Map
Buttons
Correct? It seems that only the map is a problem. Try removing the position: absolute and associated styles, your .map-container should look like this:
.map-container {
margin: 50px;
}
Setting position:absolute is causing the map to appear in the middle of the page, and disregard any layout. position:absolute puts the map some place relative to the nearest parent element with postition set to something.